ساخت یک سیستم متحرک فوق العاده برای پنل عضویت ویژه

یک جدول قیمت گذاری که به فرم ثبت نام متصله و هنگامی که کاربر یک پنل رو انتخاب میکنه فعال میشه . 

طراحی یک فرآیند پرداخت آسان هرگز راحت نبوده چون هیچ استاندارد جهانی براش وجود نداره .اگه شما در ارائه و پیشنهاد دادن پنل های مختلف با قیمت های مختلف مشکل دارین ، به نظرم باید کاربرهای خودتونو از طریق یه جدول ، با قیمت های پنل آشنا کنید . ما فعلا با قسمت ساخت پنل کاری نداریم ان شالله در یه پست دیگه حتما در موردش صحبت میکنیم اما در این پست تمرکزمون ، رو این قضیه اس که بعد از انتخاب یه پنل چه اتفاقی باید بیفته . در اغلب موارد بعد از انتخاب یکی از پنل ها ، اون سایت کاربران رو به یه صفحه دیگه هدایت میکنه . با این حال ، اگر روند پرداخت خود را کاملا ساده . و دارای جدول قیمت گذاری در همان صفحه و توانایی پرداخت از راه درست داشته باشن این موارد میتونه اونا رو تحریک به انجام کاری که شما میخواین بکنه و این چیزیه که ما سعی داریم تو این مقاله بهتون یاد بدیم .

دانلود فایل | دمو

صحبت کافیه ، اجازه بدین بریم سراغ کدها ! 

• ساختار کدهای Html

ساختار کلی html از دو المنت اصلی تشکل شده یکی ul.cd-pricing که برای جدول هزینه هاست و دیگری div.cd-form برای پنجره شکل مدل . هر طرح شامل یک المنت header که درون این المنت عنوان و قیمت قرار داده میشه و یک div.cd-pricing-features که شامل یک لیست از ویژگی هاست و در آخر هم یک footer برای تماس با دکمه select . 

خب حالا میرسیم به فرم . ساختار فرم خیلی ساده و سر راسته . فقط به یک نکته توجه داشته باشین . المنت div.cd-plan-info خالیه و توسعه دهنده با استفاده از jquery میتونه اطلاعاتی که نیاز داره تا کاربر ببینه رو بهش نشون بده . 

<ul class="cd-pricing">
	<li>
		<header class="cd-pricing-header">
			<h2>Basic</h2>
 
			<div class="cd-price">
				<span>$9.99</span>
				<span>month</span>
			</div>
		</header> <!-- .cd-pricing-header -->
 
		<div class="cd-pricing-features">
			<ul>
				<li class="available"><em>Feature 1</em></li>
				<li><em>Feature 2</em></li>
				<li><em>Feature 3</em></li>
				<li><em>Feature 4</em></li>
			</ul>
		</div> <!-- .cd-pricing-features -->
 
		<footer class="cd-pricing-footer">
			<a href="#0">Select</a>
		</footer> <!-- .cd-pricing-footer -->
	</li>
	
	<li>
		<!-- ... -->
	</li>
 
	<li>
		<!-- ... -->
	</li>
</ul> <!-- .cd-pricing -->
 
<div class="cd-form">
	
	<div class="cd-plan-info">
		<!-- content will be loaded using jQuery - according to the selected plan -->
	</div>
 
	<div class="cd-more-info">
		<h3>Need help?</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
	
	<form action="">
		<fieldset>
			<legend>Account Info</legend>
			
			<div class="half-width">
				<label for="userName">Name</label>
				<input type="text" id="userName" name="userName">
			</div>
			
			<div class="half-width">
				<label for="userEmail">Email</label>
				<input type="email" id="userEmail" name="userEmail">
			</div>
			
			<div class="half-width">
				<label for="userPassword">Password</label>
				<input type="password" id="userPassword" name="userPassword">
			</div>
			
			<div class="half-width">
				<label for="userPasswordRepeat">Repeat Password</label>
				<input type="password" id="userPasswordRepeat" name="userPasswordRepeat">
			</div>
		</fieldset>
 
		<fieldset>
			<!-- ... -->
		</fieldset>
		
		<fieldset>
			<!-- ... -->
		</fieldset>
	</form>
 
	<a href="#0" class="cd-close"></a>
</div> <!-- .cd-form -->
 
<div class="cd-overlay"></div> <!-- shadow layer -->

• اضافه کردن استایل 

css این پروژه خیلی خیلی سادست . فقط باید برخی نکات رو توجه کنید . کلاس .empty-box اضافه میشه به ، .cd-pricing > li ، برای زمانی که فرم قابل مشاهده باشه . باید پنلی که انتخاب میکینم ، اون پنل محو بشه و از اونجا فرم قابل مشاهده باشه. برای همین هم از کلاس .empty-box استفاده میکنیم . 

.cd-pricing > li {
  position: relative;
  margin: 0 auto 2.5em;
  background-color: #ffffff;
  border-radius: .3em .3em .25em .25em;
  box-shadow: 0 2px 8px rgba(2, 4, 5, 0.5);
}
 
.cd-pricing > li.empty-box {
  box-shadow: none;
}
 
.cd-pricing > li.empty-box::after {
  /* placeholder visible when .cd-form is open - in this case same color of the background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f222b;
}

 از جهت دیگه وقتی فرم رو بستیم بدونیم که اون فرم برای کدوم یکی از پنل ها بوده و زمانی که فرم رو بسیتم بصورت متحرک به دنبال دکمه بره و پنل برگرده . دارم در مورد دکمه ای پنلی که در در قسمت cd-pricing-footer وجود داره صحبت میکنم و کدش هم به صورت زیر میشه . 

.cd-pricing-footer a {
  transition: transform 0.3s;
}
 
.empty-box .cd-pricing-footer a {
  /* scale down to 0 the action button when sign up form is visible */
  transform: scale(0);
}

در div.cd-form خصوصیت position رو برابر با fixed قرار میدیم و اون اندازه پیش فرض هم نداره . زمانی که کاربر روی دکمه select کلیک میکنه ، ما فرم رو قابل مشاهده می کنیم ، (from visibility: hidden; to visibility: visible;) و در قدم بعدی قیمت و مشخصاتی که در پنل وجود داشت بطور متحرک به قسمتی از فرم تبدیل میشه . کد های بخش المنت div.cd-form رو میتونید در زیر ببنید :

/* -------------------------------- 
 
Form 
 
-------------------------------- */
 
.cd-form {
  position: fixed;
  z-index: 2;
  background-color: #ffffff;
  border-radius: .25em;
  visibility: hidden;
  transition: visibility 0s 0.8s;
 
  /* Force Hardware Acceleration in WebKit */
  transform: translateZ(0);
  backface-visibility: hidden;
}
 
.cd-form.is-visible {
  /* form is visible */
  visibility: visible;
  transition: visibility 0s 0s;
}

یکی از آخرین جزئیاتی که باید رعایت کنید : هنگامی که فرم قابل مشاهده است . میبینید که بکگراند سبزی که در پنل وجود داشت هنگامی که فرم قابل مشاهده میشه به بکگراند قسمت قیمت گذاری و لیست ویژگی های مهم تبدیل میشه (تنها در نسخه دسکتاپ) . در واقع css این المنت فرق داره  (.cd-form .cd-pricing-features::before) . ارتفاع هم که متحرکه . (با استفاده از مقیاس های برای تبدیل) 

.cd-form .cd-pricing-features::before {
  /* this is the layer which covers the .cd-pricing-features when the form is open - visible only on desktop */
  content: '';
  position: absolute;
  /* fix a bug while animating - 1px white space visible */
  top: -5px;
  left: 0;
  
  height: calc(100% + 5px);
  width: 100%;
  background-color: #95ac5f;
 
  will-change: transform;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.6s 0.2s;
}

• دستکاری عملکرد ها و رویداد ها 

تابع animateForm() برای متحرک سازی فرم مورد استفاده قرار میگیره . زمانی که یه کاربر روی دکمه select کلیک مکینه تابع موقعیت و بعد قیمت گذاری جدول انتخاب شده رو ارزیابی میکنه  و در مرحله بعد برای کامل کردن .cd-form استفاده میکنه . (جعبه پنل هم با کلاس .empty-box تا بستن فرم پنهان میمونه ) .

سپس انیمیشن شروع می شه و با استفاده از انیمیشن طول و عرض و همچنین موارد دیگه تغییر میکنه . 

//form is the .cd-form element
form.velocity(
{
	'width': tableWidth+'px', //pricing table item width
	'height': tableHeight+'px', //pricing table item height
	'top': formTopValue, //final top value of the form 
	'left': formLeftValue, //final top value of the form 
	'translateX': formTranslateX+'px', //difference between formLeftValue and pricing table item left value
	'translateY': formTranslateY+'px', //difference between formTopValue and pricing table item top value
	'opacity': 1,
}, 0, function(){
	//table is the pricing table item
	table.addClass('empty-box');
	
	form.velocity(
	{
		'width': formFinalWidth+'px', //form final width
		'height': formFinalHeight+'px', //form final height
		'translateX': 0,
		'translateY': 0,
	}, 
	//animation duration
	animationDuration, 
	//spring easing
	[ 220, 20 ]).addClass('is-visible');
});

هنگامی که کاربر مدل رو میبنده ، فیلد های فرم پنهان میشه (opacity اونها به 0 تغییر میکنه ) و در قدم بعدی انیمیشنی که برای قابل مشاهده کردن فرم استفاده میشد بطور معکوس برای بستن فرم استفاده میشه . (برای اجرای درست انیمیشن ها از تاخیرهای متفاوتی که با متغیر delay مقدار دهی میشه استفاده میکنیم)

خوب امیدوارم لذت برده باشین و مورد استفاده اتون قرار گرفته باشه .