اصول استفاده از افکت ها و انیمیشن ها در طراحی سایت

اما افزودن آن به سایت خود و اطمینان از موثر بودن آن در بهترین حالت ممکن است مشکل باشد.

بیایید آن را تجزیه کنیم و در مورد مزایا ، چگونگی ایجاد آن و چند نمونه از طراحی انیمیشن بحث کنیم.

به طور کلی در این مقاله قصد داریم کمی در رابطه با تئوری انیمیشن های وب صحبت کنیم.

که نحوه ی پیاده سازی آن ها چگونه است و چه ارزشی را در طراحی سایت دارد تا رسیدن به مباحث بهینه سازی آن.

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

تا پایان با ما همراه باشید. 

پس از مطالعه ی این مقاله ، خواندن بخش دوم آن یعنی بهترین انیمیشن های مورد استفاده در سایت را فراموش نکنید. 

مزایای انیمیشن های وب

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

همانطور که در مقاله ی وبسایت های داینامیک و استاتیک گفته شد ، یک وبسایت داینامیک می تواند به مراتب برای کاربر جذاب تر و تعامل پذیر تر باشد.

نکته ی مهم دیگری که وجود دارد در خرید اعتبار و اعتماد کاربر با یک طراحی منحصر به فرد و خاص می باشد.

( پیشنهاد می کنیم در رابطه با پکیج طراحی سایت خاص ماناتاز نیز مطالعه ای داشته باشید.)

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

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

چگونه ساختن انیمیشن های وب

از نقطه نظر فنی ، انواع مختلفی از انیمیشن وجود دارد که می تواند در یک سایت گنجانده شود ، بنابراین نوعی که انتخاب می کنید روند شما را تعیین می کند.

و اینجاست که علاوه بر کیفیت انیمیشن ها یک مسئله ی مهم تر تحت عنوان بهینه سازی مطرح می شود.

برخی از ساده‌ترین انیمیشن ها ، گیف‌های متحرک یا SVG هستند، اما این فرمت‌ها معمولاً فایل‌های حجیمی هستند، بنابراین می‌توانند زمان بارگذاری سایت را افزایش داده و در نتیجه در سرعت سایت شما تاثیر گذار باشند.

( مطالعه ی مقاله ی سرعت سایت می تواند به شدت در زمینه ی درک بهینه سازی به شما کمک کند.)

شما می توانید انیمیشن را به روش های مختلف اعمال کنید :

CSS

JS

SVG

Canvas 2D & 3D

ویدئو

گیف

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

ممکن است بتوانید به سبک انیمیشن مورد نظر خود با استفاده از transition ها و انیمیشن‌های CSS دست یابید که خب عالی است.

به همین ترتیب، ممکن است بخواهید کنترل دقیق‌تری یا افکت‌های متفاوتی داشته باشید که نمی‌توانید به تنهایی با CSS به دست آورید.

اما به طور کلی انیمیشن های css و جاوا اسکریپت دو زبان برنامه نویسی سمت فرانت بهترین انتخاب هستند و این به خاطر مباحث بهینه سازی می باشد. ( که ما هر دوی این زبان ها را در مقالات مجزایی معرفی کرده ایم.)

انیمیشن CSS را می توان برای ایجاد طیف گسترده ای از افکت ها ، از تغییرات ساده در رنگ دکمه ها تا انیمیشن های پیچیده با کی فریم ها استفاده کرد.

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

شما باید تخصصی را داشته باشید که انیمیشن وب را تا حد ممکن “سبک” کنید.

در انیمیشن های سایت بیشتر به انیمیشن های ملایم و سبک باید نگاه کنید ، مانند انیمیشن درخشش یک المان ، چرخش یک تصویر ، ترنزیشن ساده ی یک اسلایدر و …

استفاده از افکت های انیمیشنی بسیار زیاد ، یا افکت های گسترده ، علاوه بر مشکلات بهینه سازی که در بالا به آن اشاره شد ؛ خطر آزار دادن کاربران شما را به همراه دارد و احتمالاً باعث می شود آنها چیزی را که برای آن آمده اند از دست بدهند.

کتابخانه ها و منابع انیمیشن سازی وب

حجم کاملی از اطلاعات و کتابخانه ها وجود دارد که می تواند به شما در تحقق رویاها و جاه طلبی هایتان در انیمیشن سازی کمک کند.

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

هر ابزاری به روش و مورد خاص خود خوب است.

قبل از استفاده از اولین ابزاری که پیدا کردید کمی تحقیق کنید.

برخی از آن ها عبارتند از :

GSAP

ScrollTrigger یا Intersection Observer API (برای کمک به انیمیشن های مبتنی بر اسکرول)

Web.dev Animations

Anime.js

Three.js / Pixi.js (از نظر فنی، خود کتابخانه‌های انیمیشن نیستند، اما برای کار با کانواس (2D و 3D) عالی هستند.)

Lottie

Animate.css

در کنار لیست کتابخانه ها ، مقالات زیادی با مثال ها ، آموزش ها و دوره هایی وجود دارد که به شما در بهبود مهارت های خود کمک می کند.

یک مثال

یکی از تخصصی ترین خدمات ماناتاز طراحی سایت می باشد.

ما قصد داریم برای ارائه ی مثال در زمینه ی طراحی سایت پویا و همراه با انیمیشن های جذاب ، وبسایت بازی راوی را مثال بزنیم.

این وبسایت برای بازی راوی ماناتاز می باشد و تمامی بخش های آن دارای انیمیشن و یک حالتی داستان سرایی است.

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

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

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

اگر انیمیشن یک ویدیو بود قطعا در یک ویدیو امکان تعامل با کاربر نیست که به عنوان مثال برای رفتن به مراحل بعدی یا نمایش یک المان از آن بخواهید که کلیکی بکند.

( پیشنهاد می کنیم برای آشنایی با وبسایت های خاص بیشتر ، با انیمیشن ها و خلافیت های منحصر به فرد مقاله ی خاص ترین سایت های جهان را مطالعه کنید.)

نمونه هایی از انیمیشن های CSS

در بخش آخر مقاله ی خود قصد داریم دو دسته بندی مهم از انیمیشن هایی که با CSS می توان ساخت ، را شرح دهیم و برای هر یک مثالی را داشته باشیم.

۱- Transitions

Transition ها ساده ترین راه برای متحرک سازی یک المان موجود در وب می باشند.

آنها به شما این امکان را می دهند که در یک مدت زمان مشخص ، تغییرات ثابتی را در عناصر صفحه ایجاد کنید.

کامپوننت های اصلی یک Transition عبارتند از :

transition-property

این ویژگی به طور خاص نشان می‌دهد که کدام عنصر CSS را به طور خاص تغییر می‌دهید (مثلاً عبارتند از: رنگ، opacity ، و غیره)

transition-duration

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

transition-delay

این کامپوننت مشخصاً نشان می‌دهد که انیمیشن چه مدت باید منتظر بماند (تاخیر بخورد) قبل از اینکه مجدد تکرار شود.

transition-timing-function

به طور مشخص نشان می دهد که انیمیشن بصری با چه سرعتی باید در مرورگر وب حرکت کند وقتی کاربر با آن در حال تعامل است.

مثال : کد زیر نشان دهنده ی تغییرات در opacity (شفافیت) است که باید قبل از ناپدید شدن کامل ، دو ثانیه طول بکشد.

.square {

opacity: 1;

transition: opacity 2s;

}

.square.hidden {

opacity: 0;

}

۲- keyframes@

برای تغییرات پیچیده‌تر متحرک در طول زمان ، از keyframes@ ، یک قانون تخصصی CSS ، باید استفاده شود.

keyframes@ اجازه می دهد که شما انیمیشن های تخصصی تری را با css بسازید.

مثال : کدهای keyframes@ زیر حالت انیمیشن محو شدن و در حین محو شدن تغییر رنگ را نشان می دهد.