ایجاد وب سایت های انیمیشنی با CSS و HTML

وب سایت‌های انیمیشنی جالب که با CSS طراحی شده‌اند برای جذب و نگهداری کاربران وب سایت بسیار جذاب‌تر هستند.

یکی از جذاب‌ترین طراحی‌های وب سایت که در سال ۲۰۱۸ طرفداران زیادی را به خود علاقمند کرد، وب سایت‌های انیمیشنی بود که تجربه کاربری هیجان انگیزی برای وب سایت‌های مدرن محسوب می‌شود. اما چرا به یک وب سایت انیمیشنی نیاز داریم؟ استفاده از CSS و HTML باعث شده است که طراحان بسیار خلاق‌تر از قبل باشند و با استفاده از انیمیشن‌های CSS به وب سایت‌ها روح ببخشند. انیمیشن‌ها این اجازه را می‌دهند تا مفاهیم پیچیده را خیلی سریع و آسان توضیح دهیم. از نظر کاربران هم، وب سایت‌های انیمیشنی بهتر از سایر وب سایت‌ها کاربر را راهنمایی می‌کنند. اگر داده‌های آماری در این خصوص را مطالعه کنید خواهید دید که وب سایت‌های تعاملی، بازدیدهای طولانی‌تر و نرخ فروش بالاتر از سایت‌های استاتیک داشته‌اند. در ادامه مقاله در لیداوب با چند وب سایت انیمیشنی فوق‌العاده آشنا خواهید شد.

معرفی چند وب سایت‌ انیمیشنی با CSS و HTML

۱. Your Plan, Your Planet

وب سایت: https://yourplanyourplanet.sustainability.google/

انیمیشن‌ها: نشانگر موس، CSS3 animations، انیمیشن‌های روایتی

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

۲. Species in Pieces

وب سایت: https://www.species-in-pieces.com/

انیمیشن‌ها: Transition، میکرو انیمیشن

این وب سایت یک وب سایت انیمیشنی CSS است که تنها از قطعات مثلثی شکل برای نشان دادن ۳۰ گونه جالب اما در خطر انقراض استفاده می‌کند. تمام مثلث‌ها به رنگ‌های متفاوت تبدیل شده و تغییر هر انیمیشن باعث شکل گیری یک گونه جدید می‌شود. هر حیوان دارای یک نمودار آماری است که تاریخ تکامل و تعداد گونه‌هایی که هر سال کمتر و کمتر می‌شوند را نشان می‌دهد. طراحان این وب سایت از جاوا اسکریپت، انیمیشن‌های CSS و اشکال SVG استفاده کرده‌اند تا مفهوم خطر منقرض شدن این گونه‌ها را نشان داده و تلاش همگانی برای جذب آن‌ها را برانگیزند.

۳. New Tactics – Sneak Peak

وب سایت: https://dribbble.com/shots/5269419-New-Tactics-Sne...

انیمیشن‌ها: انیمیشن HTML ،Data animation

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

۴. Miki Mottos

وب سایت: https://www.mikimottes.com/

انیمیشن‌ها: Typography، اسکرول نمایش دهنده انیمیشن، انیمیشن انتظار

این پورتفولیو یک وب سایت تعاملی عالی به سبک نمایشی را ارائه می‌دهد. اگر می‌خواهید یاد بگیرید چگونه با افزودن بخش‌هایی از انیمیشن‌های مختلف یک وب سایت انیمیشنی بسازید، Miki Mottos یک نمونه عالی است که یک وب سایت انیمیشنی CSS منحصر به فرد است و نه تنها طراحی نوار راهبری آن به زیبایی انجام شده است بلکه طراحی کل وب سایت تجربه کاربری دلچسبی فراهم می‌کند. اگر وقت آن را دارید که این وب سایت را با دقت بررسی کنید، اثر انیمیشن انتظار هم برای شما بسیار جالب خواهد بود.

۵. Genesis

وب سایت: https://eatgenesis.com/

انیمیشن‌ها: افکت موس، اسکرول نمایش دهنده انیمیشن

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

۶. KIKK Festival

وب سایت: https://www.kikk.be/2018/en/home

انیمیشن‌ها: افکت موس، میکرو انیمیشن

KIKK یک وب سایت آموزش‌های فرهنگی است که به صورتی بسیار خلاقانه طراحی شده و به عنوان ذره بینی برای کمک به شما در یافتن اطلاعات مفید عمل می‌کند. وقتی شما موس را تکان می‌دهید، رنگ پس زمینه از پشت پوشش آن، قابل مشاهده است. تصاویر بامزه، افکت موس، تعاملات میکرو و انیمیشن‌های فوق‌العاده، باعث زیبایی هرچه تمام تر این وب سایت شده است.

۷. Onedesigncompany

وب سایت: https://onedesigncompany.com/

انیمیشن‌ها: تعاملات میکرو، انیمیشن بارگذاری، انیمیشن روایی

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

بهترین ابزارها برای ایجاد وب سایت های انیمیشنی

۱. Animate.CSS

۲. Magic Animations

۳. Bounce.js

۴. Mockplus

طراحی وب سایت‌های مدرن بیشتر روی افکت‌های بصری و تجربه کاربری تمرکز دارند. با استفاده از وب سایت‌های بالا می‌توانید بیاموزید چگونه وب سایت‌های انیمیشنی با HTML و CSS ایجاد کنید.

می‌توانید مقالات کاربردی CSS و HTML ما در لیداوب را دنبال کنید و مسیر طراحی سایت خود را هموارتر کنید. همچنین، می‌توانید نظرات و سوالات خودتان را در بخش کامنت‌ها با ما در میان بگذارید.