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

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

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

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

اکنون ما آن را از سر راه برداشته ایم، بیایید به چند کتابخانه نگاهی بیندازیم، از ساده ترین ها شروع کنیم و به سمت پیشنهادات چالش برانگیزتر (اما هنوز قابل مدیریت) برویم.

AniJS

اگر با انیمیشن یا جاوا اسکریپت تازه کار هستید، AniJS یک مکان عالی برای شروع است. این یک کتابخانه تعاملی UI است که به شما امکان می دهد از جاوا اسکریپت برای کنترل انیمیشن های CSS بدون نوشتن جاوا اسکریپت استفاده کنید. جاوا اسکریپت را به زبان ساده تبدیل می کند – if: event, do: action, to: element. از آنجایی که این دستور زبان اصلی جاوا اسکریپت را نیز تقلید می کند، می تواند به یک غیر کدنویس کمک کند تا با JS راحت باشد. به علاوه، اگر بخواهید می توانید با آن پیشرفته تر شوید.

دموها و نمونه‌های زیادی وجود دارد و یک صفحه منبع دارد AniCollection – که دارای تعداد زیادی انیمیشن آماده است که می توانید دانلود و استفاده کنید.

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

کتابخانه های خرد

راه دیگر برای شروع کار با انیمیشن این است که کتابخانه ای را امتحان کنید که روی یک چیز تمرکز دارد. این میکروکتابخانه‌ها مزیت کوچک بودن را دارند و از آنجایی که عملکرد آنها محدود است، معمولاً به راحتی می‌توان آنها را اجرا کرد. در اینجا چند پیشنهاد برای شما وجود دارد که می توانید امتحان کنید:

ScrollReveal

ScrollReveal تقریباً همان چیزی را که روی قلع می‌گوید انجام می‌دهد – عناصر همانطور که ظاهر می‌شوند یا از ویوپورت خارج می‌شوند متحرک می‌شوند. این یک افکت محبوب است که می تواند در عین ظریف بودن کاربر را خوشحال کند.

یک اشکال احتمالی این است که باید آن را در سر سند بارگذاری کنید تا از “سوسو زدن” محتوا جلوگیری کنید. در مستندات آن به این موضوع پرداخته شده است.

AOS

AOS مخفف animate on scroll است و برای – بله، درست حدس زدید – متحرک کردن عناصر هدف در حین اسکرول کردن کاربر است. این افکت محبوب می تواند عملکردی کاربردی داشته باشد و به جذابیت بصری اضافه کند.

Granim.js

Granim.js به شما امکان می دهد شیب رنگ را متحرک کنید. می توانید رنگ ها، جهت و حالت های ترکیبی را کنترل کنید و از آن با ماسک های تصویر استفاده کنید. در ابتدا، این مورد صرفاً تزئینی به نظر می رسد، اما می توانید آن را در تعاملات کاربر مانند رویدادهای ماوس اعمال کنید.

تایپش کن

تایپش کن انیمیشن هایی با جلوه ماشین تحریر ایجاد می کند. این اثری است که ما اغلب در سایت های نمونه کار می بینیم. این به تعامل کاربر کمک می کند و می تواند با جلب توجه به متن متحرک به سلسله مراتب محتوا کمک کند.

Vivus

Vivus SVG ها را متحرک می کند و آنها را شبیه به ترسیم می کند. این یکی ممکن است کمی پیچیده تر باشد، اما نتایج بسیار عالی است.

علامت گذاری خشن

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

barba.js

barba.js انتقال بین صفحات را متحرک می کند و تصور یک برنامه تک صفحه ای را ایجاد می کند. توجه داشته باشید، مستندات آن آشنایی با نحو JS را فرض می‌کند و به شما توصیه می‌کند قبل از اقدام به استفاده از آن اطمینان حاصل کنید که با آن راحت هستید.

TweenJS

TweenJS یک کتابخانه tweening است که از توئین کردن هر دو ویژگی شی عددی و ویژگی های سبک CSS پشتیبانی می کند. دستورات را می توان به هم متصل کرد تا توئین های پیچیده ایجاد شود.

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

کتابخانه های بزرگتر

اگر متوجه شدید که باید از بیش از 4 یا 5 میکروکتابخانه به طور همزمان استفاده کنید، ممکن است وقت آن رسیده باشد که به کتابخانه کمی گسترده تر یا حتی یک چارچوب کامل نگاه کنید که می تواند هر کاری را که می خواهید انجام دهید به تنهایی انجام دهد.

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

GSAP

GSAPکه با نام GreenSock نیز شناخته می شود، یکی از محبوب ترین کتابخانه های جاوا اسکریپت برای انیمیشن است. می‌تواند تقریباً هر چیزی را که جاوا اسکریپ به آن دسترسی داشته باشد، متحرک کند، از جمله ویژگی‌ها و متغیرهای CSS، ویژگی‌های شی سفارشی، SVG، رشته‌های پیچیده و مؤلفه‌های React.

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

ممکن است برای هر کسی که با جاوا اسکریپت ناآشنا باشد کمی ترسناک به نظر برسد، اما مستندات ساده و جامع است و پشتیبانی خوبی دارد.

Anime.js

یکی دیگر از کتابخانه های انیمیشن بسیار محبوب است Anime.js. این می تواند ویژگی های CSS، SVG، ویژگی های DOM و اشیاء جاوا اسکریپت را هدف قرار دهد. دارای یک سیستم سرسام‌آور داخلی است که همپوشانی انیمیشن‌ها و کنترل‌های زمان‌بندی عالی را آسان می‌کند.

باز هم، ممکن است تا حدودی پیچیده به نظر برسد، اما مستندات به خوبی انجام شده است، با نمایش‌های نمایشی واضح در کنار هر مورد پوشش داده شده است.

پاپموشن

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

mo.js

Mo.js دارای یک API اعلامی برای ایجاد آسان موشن گرافیک های سفارشی. ماژولار است، با اجزای داخلی که می توانید به عنوان نقطه شروع استفاده کنید. ماژول Burst به خصوص لذت بخش است.

نحوه متحرک سازی صفحات وب

انیمیشن های وب به دو دسته اصلی تقسیم می شوند:

• اتفاقی: جایی که انیمیشن ها بدون توجه به کاری که کاربر انجام می دهد پخش می شود. انیمیشن های اتفاقی لزوماً فقط تزئینات نیستند. آنها می توانند نمایش اسلاید یا دمو باشند.
• در ارتباط بودن: که در اثر رویدادهایی مانند شناور کردن، پیمایش و ضربه زدن ایجاد می شوند. اینها می توانند برای راهنمایی کاربران و تشویق آنها به انجام اقدامات مورد استفاده قرار گیرند.

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

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

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

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

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

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

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

کتابخانه‌های میکرو معمولاً بین 5 تا 7 کیلوبایت Gzip دارند، اما حتی کتابخانه‌های گسترده‌تری که در اینجا بررسی کرده‌ایم کمتر از 30 کیلوبایت Gzip دارند. وقتی آن را با اندازه فایل های تصویری مقایسه می کنید، بسیار ناچیز است. حتی در مقایسه با فایل های CSS، دقیقاً بزرگ نیست.

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

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

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

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

اندازه چیزی شبیه نفخ نیست – نفخ چیزی است که شما به آن نیاز ندارید.

اندازه مهم است، اما حذف کد اضافی احتمالاً اهمیت بیشتری دارد.

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

این ابزارها فقط برای غیر کدنویس ها نیستند. آنها برای توسعه دهندگان فرانت اند نیز صرفه جویی زیادی در زمان دارند.

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