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

طراحی تعاملات هیجان انگیز، اما پرهزینه است. غالباً بین طراحان و توسعه دهندگان به عقب و جلو می رود تا انیمیشن ها به درستی دریافت شوند. اما لازم نیست اینطور باشد.

انتقال CSS این فرصت را برای طراحان با دانش محدود در مورد کد فراهم می کند تا پروژه های خود را با جلوه های حرکتی خیره کننده بهبود بخشند که کاربران را مانند قبل درگیر می کند.

بیایید با یک چیز ساده شروع کنیم: حرکت از یک صفحه به صفحه دیگر…

تکنیک View-slider ساده

شما می توانید با یک ویرایشگر متن و یک مرورگر برای آزمایش بسازید، اما من ترجیح می دهم از ابزاری مانند jsfiddle یا codepen استفاده کنم.

یک چیدمان اولیه چیزی شبیه این بسازید:

<div class="screen">
 <div class="slider">
 <img alt="" src="https://www.webdesignerdepot.com/2014/04/3-stunning-css-animation-effects-that-will-captivate-your-users/img1.png" />
 <img alt="" src="img2.png" />
 </div>
</div>

شما به یک “صفحه” و سپس یک “لغزنده” در داخل صفحه نیاز دارید. نوار لغزنده فراتر از لبه صفحه نمایش گسترش می یابد و تصاویر ماکت را نگه می دارد.

برای رسیدن به این هدف، باید اطمینان حاصل کنید که اضافه می کنید سرریز: پنهان به تقسیم صفحه نمایش

CSS شما چیزی شبیه به این خواهد بود:

.screen {
 overflow:hidden;
 width:320px;
 height:568px;
}
.slider {
 position:relative;
 float:left;
 height:568px;
 width:700px;
 left:0;
 -webkit-transition:all 0.5s ease-in-out;
}
.slider img {
 position:relative;
 float:left;
 height:568px;
 width:320px;
}
.screen:hover .slider {
 left:-320px;
}

بیانیه نهایی در CSS چیزی است که موقعیت لغزنده را کنترل می کند، دیوی لغزنده . را به اندازه 320 پیکسل به سمت چپ حرکت می دهد و تصویر دوم را نشان می دهد.

اینجا jsfiddle با تمام کدها است.

با کمی خلاقیت، واقعاً می توانید با این تکنیک ساده بدوید و چند انیمیشن هوشمندانه بسازید. وقتی جلوه ها را با هم ترکیب می کنید چیزها واقعاً جالب می شوند. به عنوان مثال: من “نمایه Swipe-to-Reveal” توییتر را از برنامه تلفن همراه آنها با استفاده از یک رویکرد بسیار مشابه “slider” بازسازی کردم.

jsfiddle را اینجا بررسی کنید.

تبدیل های سه بعدی

مسواک بزنید روی در صورت نیاز، سه بعدی شما تبدیل می شود، زیرا جلوه بصری خیره کننده ای ارائه می دهند.

با استفاده از -webkit-transform: ویژگی، ما می توانیم مرورگر را به عنوان یک فضای سه بعدی در نظر بگیریم و چند انیمیشن با عمق ایجاد کنیم. iOS7 به طور خاص از استعاره “فضای واحد” در برنامه های اصلی خود استفاده می کند. همچنین تبدیل‌های سه‌بعدی برای ایجاد انیمیشن‌های “جهش” یا “پاپینگ” بسیار مفید هستند.

من از همین استفاده کردم :hover تاکتیک از مثال قبلی ما و اضافه کردن چند تبدیل سه بعدی برای ایجاد این افکت:

تمام کدها را اینجا بررسی کنید.

استفاده از جی کوئری و جاوا اسکریپت

تا اینجا ما فقط CSS را بررسی کرده ایم :hover افکت ها برای تولید انیمیشن با jQuery می توانیم استفاده کنیم click() رویدادهایی برای تعیین addClass() و removeClass() روی عناصر. این به ما انعطاف‌پذیری زیادی می‌دهد تا هر نوع انیمیشن دیوانه‌واری را که می‌خواهیم انجام دهیم.

در زیر یک تابع به نام دارم kaskade، که اعمال می شود open کلاس به هر یک از 4 آیتم منو در فواصل 0.15 ثانیه. را open کلاس آیکون ها را می دهد opacity:1; و left:0; زمانی که قبل از آنها در بودند opacity:0; و left:-50px. این یک جلوه باز کننده بازی برای منو ایجاد می کند. برای خودت آزمایش کن داخل jsfiddle

این مورد آخر یک مثال نسبتاً شدید است، اما فقط نشان می‌دهد که با این سیستم نمونه‌سازی چه چیزی ممکن است:

یکبار دیگر، اینجا jsfiddle است.

با طراحی انیمیشن های ساده خود، در زمان و انرژی خود و تیم توسعه خود صرفه جویی می کنید. با CSS می‌توانید انیمیشن‌ها را آزمایش کنید و نمونه‌های زنده، تنفس و متحرک را برای مهندسان خود بفرستید. تنها چیزی که برای زنده کردن مدل های خود لازم است کمی کد است.