img

ایجاد یک فرم متحرک وب سه مرحله ای…

/
/
/

با استفاده از CSS3 و  jQuery ، فرم متحرک سه مرحله ای بسازید و کاربران را راهنمایی و درگیر کنید.

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

۱- کار را با HTML   آغاز کتید.
همان گونه که در مقدمه اشاره شد ،این آموزش،  یک فرایند سه مرحله ای است،  بنابراین به طور طبیعی باید از مرحله یک شروع کنیم. در ابتدا  یک  wrapper div  را باز و آن  را «form-wrap» نام گذاری کنید. تگ های خالی<span> مراحل فعال را نشان می دهند ، و سپس با استفاده از برخی محتویات، کاربر را از فعالیت ها آگاه می کنیم. از کد زیر استفاده کنید.

<div class=”form-wrap”>
<div class=”form-header”><span class=”is-active”></span><span></span><span></span></div>
<div class=”form-bodies”>
<div class=”form-body form-body-step-1is-showing”>
<div class=”title”>Step 1</div>
<div class=”description”>Fill out your details and click “Begn”.</div>

۲- فرم را اضافه کنید.
در ادامه کار با فرم در مرحله قبل، فرم وب ساده را اضافه می کنیم. این فرم تنها دو حوزه ورودی و placeholder text  را شامل می شود، اما می توانید حوزه های ورودی مورد نظر خود را نیز اضافه کنید. سپس یک دکمه را اضافه می کنیم تا کاربر به مرحله بعد هدایت شود. از کد زیر استفاده نمایید.

<form>
<input type=”text” placeholder=”Your Name”/>
<input type=”email” placeholder=”Your
Email”/>
<div class=”text-center”>
<div class=”button”>Begin</div>
</div>
</form>

۳- یک عنوان را برای دو مرحله اضافه کنید.
در مرحله بعدی فرم، از کاربر می خواهیم تا حداقل به یک سئوال دو گزینه ای پاسخ دهد. همانند مرحله اول، نام طبقه  form-body  ( فرم- جسم+)و سپس یک طبقه جدید به نام form-body2 را اضافه می کنیم. عنوان «step 2»( مرحله ۲) را انتخاب کنید و سپس کار خود را با یک سئوال به پایان برسانید. برای این منظور از کد زیر استفاده کنید.

<div class=”form-body form-body-step-2”>
<div class=”title”>Step 2</div>
<div class=”description”>Do you
consideryourself a…</div>

۴- پاسخ های مرحله دو را مشخص کنید.
برای پاسخ ها باید یک فرم دیگر را اضافه کنیم. این فرم، دکمه های رادیو را شامل می شود ، به طوری که کاربر به راحتی می تواند گزینه مورد نظر را انتخاب کند. سپس می توانیم نام طبقه  text-center ( متن- مرکز) را برگزینیم، بعدا برای مرکز دکمه، با استفاده از  CSS به آن می پردازیم. از این کد استفاده کنید.

<form>
<label>
<input type=”radio” name=”radio”/>Web
designer?
</label>
<label>
<input type=”radio”  name=”radio”/>
Front-enddeveloper?
</label>
<div class=”text-center”>
<div class=”button”>Next</div>
</div>
</form>
</div>

۵- روی مرحله سه کار کنید.
در مرحله آخر، به کاربر اطلاع داده می شود که فرم تکمیل شده و اجرای دوباره آن ممکن است. یک دکمه جدید به نام return-botton( دکمه-بازگشت) را ایجاد می کنیم و کاربر با استفاده از آن می تواند به ابتدای کار باز گردد. در نهایت،  باید لینک ها به کتابخانه  jQuery و سپس به فایل  اسکریپت سفارشی را اضافه کنیم. از کد زیر استفاده کنید.

<div class=”form-body form-body-step-3”>
<div class=”title”>Step 3</div>
<div class=”description”>Click “Done” and let’s do this again shall we…</div>
<div class=”text-center”>
<div class=”button”>Done!</div>
</div>
</div>
</div>
</div>
<div class=”text-center”>
<div class=”rerun-button”>Go Again!</div>
</div>
<script src=”https://code.jquery.com/
jquery-2.2.4.min.js”></script>
<script src=”js/myscripts.js”></script>

۶- با  CSS کار کنید.
اول یک شیب رنگی آبی مناسب را به کل صفحه اضافه کنید و سپس فونت Roboto  را بر گزینید. در قسمت بعد به عنوان صفحه می پردازیم. این عنوان باید مناسب و مشخص باشند ، به طوری که کاربران صفحات با کارکرد ها آشنا شوند.

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

۸- حوزه های ورودی را تمام کنید.
برای اتمام سبک حوزه های ورودی ، یک مرز آبی بر روی حالت فوکوس حوزه ها را اضافه می کنیم. این کار به مشخص کردن حوزه انتخاب شده توسط کلیک به کاربر کمک می کند. سپس، عنوان دکمه های رادیو در سمت راست را به آرامی فشار می دهیم و برای این منظور حاشیه سمت راست  ۱۵px  را برای هر کدام اضافه می کنیم. می توانید از کد زیر استفاده کنید.

input[type=”text”]:focus,
input[type=”email”]:focus {
border-color: #0e98df;
}
input[type=”radio”] {
margin-right: 15px;
}

۹- برچسب مرحله دو را انتخاب کنید.
در مرحله دوم فرم، دو سئوال را در برچسب ها قرار دادیم. با این کار می توانیم، برخی از سبک ها را ارائه کنیم. اکثر بخش های  CSS نیاز به توضیح ندارند، با این وجود، بهتر است در انتخاب مرز خاکستری در بالا و پایین برچسب ها بیشتر توجه کنید و از لایه گذاری مناسب بهره ببرید.

label {
margin-bottom: 20px;
display: block;
font-size: 18px;
color: #666;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 20px 0;
cursor: pointer;
}
label:first-child {
margin-bottom: 0;
border-bottom: none;}

۱۰- سبک دکمه ها را انتخاب کنید.
در مرحله بعد، برخی از سبک ها را به دکمه ها اضافه کنید. این دکمه ها عبارتند از «begin»( شروع)،»next»( بعدی)، «done»( اتمام کار)،» go again»( تکرار)

۱۱- دکمه return( بازگشت) را اضافه کنید.
باید به دکمه بازگشت بیشتر توجه شود، زیرا این دکمه باید مخفی باشد و سپس از jQuery  برای نمایش تمام مراحل انجام شده استفاده کنید. این دکمه به جای آن که بر روی فرم سفید باشد، بر روی پیش زمینه آبی قرار می گیرد؛ به همین دلیل، یک مرز سفید را به آن اضافه می کنیم و با استفاده drop shadow  کمی آن را برجسته می کنیم.

۱۲-  Wrap و header  فرم مورد نظر
با استفاده از طبقه های form-warp و  form-header  می توانید به فرم خود شکل دهید. یک فرم با عرض ۶۰۰px  را انتخاب می کنیم و آن را در مرکز قرار می دهیم. بعد از اتمام فرم یک انتقال برای آن ایجاد می کنیم تا دوباره اجرا شود. فرم پس از اتمام، به صورت کشویی حرکت می کند و  پس از فشردن دکمه «go again» دوباره شروع می شود.

۱۳- تگ های style span
تگ های span اضافه شده به عنوان نمایش دهنده صفحه عمل می کنند و شبیه breadcrumb هستند. این دایره های  ۱۲px   بالای صفحات فرم قرار می گیرند و تگ  span   تنها برای صفحات فعال آبی می شود. از این کد استفاده نمایید.

.form-header span {
display: block;
height: 12px;
width: 12px;
margin: 5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
}
.form-header span.is-active {
background: rgba(0, 0, 0, 0.4);
background: #0e98df;}

۱۴- از ویژگی perspective استفاده کنید.
در زمان انجام انتقال و کار با فضای سه بعدی، باید مطمئن شویم که المان های مورد نظر، از ویژگی های چشم انداز انتخاب شده برخودار هستند.

۱۵- موقعیت اجسام فرم را تعیین کنید.
باید مطمئن شوید که اجسام شکل ما نسبی هستند ، به طوری که متحرک کردن آن ها ممکن باشد، سبک پیش فرض را برای فرم ها انتخاب کنیم. برای مثال پیش زمینه را سفید کنیم و قطره آب را برای آن اضافه نماییم. سپس حالت نمایش را بر روی   none ( هیچ کدام) قرار می دهیم، به طوری که پس از ایجاد تصویر متحرک، بتوانیم آن را به دوباره برگردانیم. برای این منظور از کد زیر استفاده کنید.

.form-bodies {
position: relative;
perspective: 1000px;
}
.form-body {
background: white;
padding: 40px 100px;
box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3);
margin-bottom: 50px;
position: absolute;
top: 0;
display: none;
box-sizing: border-box;
width: 100%;
transform-origin: top left;}
.form-body.is-showing {
display: block;}

ویژگی perspective چشم انداز

ویژگی چشم انداز فضای سه بعدی را به یک المان اضافه می کند. فاصله میان صفحه  Z  و کاربر را تغییر می دهد.  اگر می خواهید یک افکت ظریف را بسازید، ارزش بزرگ را انتخاب کنید. ارزش بزرگ تر ، افکت را نیز به شکل نزدیک می کند.

۱۶-  حرکت تصاویر به سمت بیرون و داخل
قوانین طبقه اضافه شده در این مرحله با استفاده از  jQuery کار می کنند. این قوانین  CSS، با کلیک بر روی دکمه های فرم ایجاد می شوند و نام های طبقه به طور خود کار با استفاده از اسکریپت اضافه می شوند. حرکت به سمت بیرون، یک تصویر متحرک swing animation   (تصویر محرک نوسان)را ایجاد می کند و پس از انجام این swing animation  ، حرکت به سمت داخل انجام می شود و حرکت فرم به حالت اول باز می گردد.
۱۷- کار با @keyframes
حرکت به سمت بیرون و داخل را توصیف کردیم، اما ، ساخت آن ها هنوز انجام نشده است. ساخت این تصاویر با استفاده از قانون @keyframe  انجام می شود. به طوری که @keyframe  ، حرکت فرم به بیرون بر روی محور y  را کنترل می کند و حرکت به داخل ،برگشت بر روی محور  x  را مدیریت می کند.

۱۸- استفاده از  jQuery
حال یک فایل script.js  را ایجاد کنید و آن را در پوشه  «js» ذخیره نمایید. این پوشه را باز و jQuery را اضافه کنید. در این بخش اول، یک تابع کلیک را به طبقه دکمه اضافه می کنید. براساس مرحله فعال، این کار چند تابع را ایجاد و چند متغیر را نیز مشخص می کند. از کد زیر استفاده کنید:

$(‘.button’).click(function(){
var $btn = $(this),
$step = $btn.parents(‘.form-body’),
stepIndex = $step.index(),
$pag = $(‘.form-header span’).eq(stepIndex);
if(stepIndex === 0 || stepIndex === 1) {
step1($step, $pag); }
else { step3($step, $pag); }
});

۱۹- اضافه کردن یک تابع برای مرحله یک
فرض کنید که بر روی دکمه next  کلیک کرده اید، این دکمه از طبقه دکمه برخوردار است. این کار، تابع مرحله یک را ایجاد می کند. تابع ایجاد شده، با اضافه کردن یک طبقه دسته جدید به نام  animated-out( تصویر به بیرون) شروع می شود. قانون حرکت به بیرون  CSS ایجاد و تصویر متحرک ما  نشان داده می شود. از کد زیر استفاده نمایید.

function step1($step, $pag){
// animate the step out
$step.addClass(‘animate-out’);

۲۰- حرکت به بیرون
پس ایجاد حرکت به بیرون مرحله یک، در مرحله بعد باید فرم را به سمت داخل به حرکت در بیاوریم و این همان مرحله دو است. نمی خواهیم این کار خیلی سریع اتفاق بیافتد، زیرا، برای انجام تصویر محرک لازم با استفاده از  CSS به زمان نیاز داریم. به همین دلیل از تابع setTimeout ( تعیین زمان به بیرون) برای تاخیر تصویر متحرک به ۶۰۰ و سپس ۱۲۰۰ میلی ثانیه استفاده می کنیم. از کد زیر استفاده کنید:

// animate the step in
setTimeout(function(){
$step.removeClass(‘animate-out is-showing’)
.next().addClass(‘animate-in’);
$pag.removeClass(‘is-active’)
.next().addClass(‘is-active’);
}, ۶۰۰);
// after the animation, adjust the classes
setTimeout(function(){
$step.next().removeClass(‘animate-in’)
.addClass(‘is-showing’);
}, ۱۲۰۰);}

۲۱- ساخت تصویر متحرک برای مرحله سه
بیت بعدی اسکریپت ، تابع مرحله سه را ایجاد می کند.  مجددا طبقه animate-up( تصویر متحرک به بالا) را انتخاب کنید که تصویر متحرک  CSS را ایجاد می کند و سپس با استفاده از  تابع  setTimeout    می توانیم تاخیری مناسبی را ایجاد کنیم که نمایش دکمه re-run( اجرای دوباره) یا «go again» را ممکن می سازد. از کد زیر استفاده نمایید:

function step3($step, $pag){
// animate the step out
$step.parents(‘.form-wrap’).
addClass(‘animate-up’);
setTimeout(function(){
$(‘.rerun-button’).css(‘display’, ‘inline-
block’);
}, ۳۰۰);}

۲۲- دکمه Return  ( بازگشت)
در این مرحله پایانی،  به دنبال تابعی هستیم که  با کلیک بر روی دکمه return ، همه چیز را به حالت اول بازگرداند. بنابراین اول از همه، طبقه  animate-up  را بر می داریم و سپس، طبقه های دیگر بر روی wrapper  فرم را اضافه و حذف می کنیم. در نهایت، دکمه   run  را مخفی می سازیم و سپس، می توانیم این عمل را تکرار کنیم.

$(‘.rerun-button’).click(function(){
$(‘.form-wrap’).removeClass(‘animate-up’)
.find(‘.form-body’)
.first().addClass(‘is-showing’)
.siblings().removeClass(‘is-showing’);
$(‘.form-header span’).first().
addClass(‘is-active’)
.siblings().removeClass(‘is-active’);
$(this).hide();});

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text