75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 09 مهر 1397
دسته بندی ها : طراحی وب

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

برای طراحانی که به دنبال ترکیب کردن انیمیشن هستند، گزینه‌های زیادی موجود است. از transitionهای دکوری که فقط رابط را زیباتر می‌کنند گرفته، تا افکت‌های معنادار که تجربه کاربری را ارتقا می‌دهند. مجموعه‌ای که ما آماده کرده‌ایم، ابزاری را پوشش می‌دهد که شما را قادر می‌سازد تا انیمیشن‌هایی را در مقیاس‌های متنوع و برای اهداف مختلف به کار بگیرید. در این مقاله ۲ قسمتی، ۷۵ پلاگین و کتابخانه را خواهید دید، که تمام نیازهای شما را پوشش می‌دهند. از تمام آن‌ها در زمان مشابه استفاده نخواهید کرد، اما هر کدام استفاده ایده‌آل خود را دارند.

با ما در بخش دوم همراه باشید:

41. Animatic.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Animatic.js یک راه حل میان مرورگری با فیزیک‌های مجتمع است که تغییر شکل‌های CSS، تغییر شکل‌های سه بعدی و JavaScript را به کار می‌گیرد تا همه چیز را زنده جلوه دهد. کار اصلی آن این است که تلاش‌های مورد نیاز از سمت شما برای پویانمایی چندین آبجکت به صورت همزمان را کاهش دهد. با استفاده از این ابزار می‌توانید انیمیشن‌های موازی و متوالی‌ای را بسازید، در حالیکه مدت زمان، تاخیر و توابع easing را تنظیم می‌کنید.

42. Move.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Move.js یک ابزار بسیار ساده برای ساخت انیمیشن‌های معمولی مانند scaling، skewing، حرکت دادن یا translating را بسازید. هر یک از انیمیشن‌ها می‌توانند با توابع easing کلاسیک ارتقا داده شوند.

43. Eg.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Eg.js یک مجموعه به دقت جمع‌آوری شده از افکت‌ها و عناصر دینامیک است که هدفشان ارتقای تعامل در رابط است. ۸ کامپوننت قدرتمند وجود دارند که عملیات‌های پایه، ۶ متد اصلی و رویدادها را دسته‌بندی می‌کنند.

44. GFX

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

GFX یک کتابخانه انیمیشن سه بعدی قانع کننده برای ساخت انیمیشن‌های CSS 3 به روش برنامه‌نویسی است. این کتابخانه با jQuery کار می‌کند و ساخت نتایج مورد نظر را ساده‌تر می‌کند. در هنگام کار با این ابزار، می‌توانید با مواردی مانند scaling، چرخش، translating، skewing و برخی موارد دیگر بازی کنید.

45. Stylie

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Stylie قطعا شما را با ظرفیت‌های خود شگفت‌زده خواهد کرد. مرکز کنترل آن ۴ تب را دارد که شما را قادر می‌سازند تا keyframeها، easing، گزینه‌های خروجی و HTML را تنظیم کنید، و در نتیجه انیمیشن‌های پیچیده را به راحتی بسازید.

46. Iconate.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Iconate.js به تغییر شکل‌ها حیات می‌دهد، و transition میان دو آیتم را با افکت‌هایی دلنشین، پیشرفت می‌دهد. این ابزار نه تنها با Font Awesome، بلکه با Glyphicons و همچنین مجموعه شخصی خود شما هم به خوبی کار می‌کند.

47. AnimateMate

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

AnimateMate یک ابزار کوچک برای تولید و خروجی گرفتن انیمیشن‌هایی در مقیاس پایین از محیط Sketch خود است. این ابزار آنچنان فانتزی نیست، اما شما را قادر می‌سازد تا با keyframeها کار کنید، توابع easing اضافه کنید، sequenceها را کنترل کنید و...

48. CAAT

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

CAAT یک فریم‌وورک استرلینگ است که یک صف قدرتمند را با استفاده از JavaScript تشکیل می‌دهد. جعبه ابزار آن سکانس‌ها، فناوری‌های چند رندری، پکیج‌های استاندارد برای رفتار و... را شامل می‌شود.

49. Granim.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Granim.js یک کتابخانه JavaScript کوچک، برای کار با رابط‌ها است. این کتابخانه می‌تواند یک انیمیشن افت حرارتی استاندارد، افت حرارت‌های دینامیک اعمال شده بر روی تصاویر، یا افت حرارت‌های در حال حرکت باشد.

50. Animista

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Animista یک زمینه کار برای اجرای آزمایشات با استفاده از مجموعه‌ای از انیمیشن‌های بر پایه CSS مرسوم است. مدت زمان، تابع زمان‌بندی، تاخیر، تکرار و برخی گزینه‌های دیگر را تنظیم کنید تا خروجی نهایی را باب میل خود بسازید.

51. Obnoxious.css

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Obnoxious.css پنج انیمیشن بر پایه CSS دارد که عناصر رابط را مجبور به لرزش، چرخش، بزرگ شدن و... می‌کنند. تنها کاری که باید انجام دهید،‌ این است که کلاس مد نظر خود را به div مورد نظر اعمال کنید.

52. Animatelo

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Animatelo تعداد زیادی افکت‌های دینامیک دارد که از Animate.css قدرتمند گرفته شده‌اند، و یک روش راحت‌تر برای اعمال آن‌ها فراهم کرده است. با تشکر از اِی‌پی‌آی Web Animations، این ابزار توسط تمام مرورگرهای مدرن پشیبانی می‌شود.

53. Foxholder

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Foxholder پکیجی از ۱۵ افکت کوچک است که به خصوص برای ارتقای تعامل کاربر با فرم‌ها ساخته شده است. هر متد به روش خود فیلدهای ورودی را تحت فشار قرار می‌دهد.

54. Rhythm.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Rythym.js تماما متشکل از انیمیشن‌های کوچک الهام گرفته شده از دیسکو است. این کتابخانه JavaScript افکت‌هایی را شامل می‌شود که نوعی حرکات رقص مانند را تقلید می‌کنند. تقریبا ۲۰ گزینه در این ابزار وجود دارند که وبسایت شما را زیباتر خواهند کرد.

55. Colorido.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

درست به مانند Granim.js، این پلاگین بر پایه JavaScript برای دستکاری رنگ به روشی درست ساخته شده است. این ابزار به شما کمک می‌کند تا به طور دینامیک، تن و کدورت پس‌زمینه و رنگ را تغییر دهید، و هم چنین برخی افت حرارت‌های شعاعی، خطی و افقی را به کار بگیرید.

56. Barba.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Barba.js از PJAX استفاده می‌کند تا تغییر مکان دادن میان صفحات که معمولا سخت است را برای کاربر ساده کند. این ابزار فقط محفظه قدیمی را مخفی می‌کند و محفظه جدید را به روشی زیبا نمایش می‌دهد.

57. ScrollReveal.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

ScrollReveal.js یک ابزار معروف برای ساخت انیمیشن‌های اسکرول است. با استفاده از متد reveal() این ابزار، می‌توانید انیمیشن‌های مختلفی را مدیریت کنید و تمام ابعاد استاندارد آن‌ها را کنترل کنید. نکته مثبت درباره آن این است که هم با وب و هم با مرورگرهای موبایل به خوبی کار می‌کند.

58. Scrollanim

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Scrollanim پیچیدگی کمتری دارد، اما همچنان نسبت به مثال قبلی ساده‌تر است. گرچه در اصل CSS 3 را مد نظر دارد، اما همچنان شما را قادر می‌سازد تا با استفاده از اِی‌پی‌آی JavaScript انیمیشن‌هایی بسازید که توسط اسکرول کردن فعال می‌شوند. این ابزار تعداد زیادی راه حل‌های از پیش ساخته شده دارد که می‌توانید سریعا به پروژه خوداعمال کنید.

59. ScrollTrigger

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

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

60. Force.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Force.js یک راه حل‌ کوچک است که از تعداد زیاد عملکردها و غنی بودن در تعداد گزینه‌ها، محروم مانده است. گرچه، این ابزار برای کارهای معمولی مثل تنظیم کردن آبجکت‌ها برای حرکت به صورت نرم یا زیباسازی اسکرول کردن مناسب است.

61. AOS

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

AOS مخفف Animate on Scroll (پویانمایی در هنگام اسکرول) است. این ابزار دقیقا کاری که می‌گوید را انجام می‌دهد. تعدادی افکت از پیش تعریف شده برای شما فراهم می‌کند که با استفاده از یک رویداد اسکرول فعال می‌شوند. اگر می‌خواهید بدون ورود عمیق به کد یک ورود دراماتیک به section مورد نظر بدهید، این ابزار برای شما عالی است.

62. Rellax

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Rellax یک اختلاف منظر زیبا است. Rellax یک کتابخانه Vanilla JavaScript است که بعد سوم را برای رابط شما فراهم می‌کند.

63. Tilt.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

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

64. Transform-when

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Transform-when یک راه حل عالی برای طراحی تجربه‌ای با یک کارایی بالا و پشتیبانی بومی برای دستگاه‌های موبایل است. این ابزار دو پارامتر حیاتی را به کار می‌گیرد: زمان و موقعیت اسکرول؛ و در نتیجه ماجراجویی کاربر را بر روی رابط از سمت شما کاملا تحت کنترل قرار می‌دهد. این ابزار هم با عناصر SVG و هم با عناصر HTML کار می‌کند.

65. CSS3 Animation

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

این مورد یک مولد قدیمی به همراه یک پیش‌نمایش زنده برای ساخت انیمیشن‌های CSS 3 پایه است. یک مرکز کنترل استاندارد در آن وجود دارد که در آن می‌توانید مدت زمان transition، تعداد دفعات تکرار، توابع زمان‌بندی و... را تنظیم کنید. مسیر آن ساده است: همه چیز را راه‌اندازی کنید، کد HTML و CSS نتیجه را کپی کرده و در پروژه خود paste کنید.

66. Curve.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

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

67. Animator.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

طبق آمار موجود ، Animator.js منعطف، موثر و سبک است. این ابزار ساده‌ترین راه را برای مدیریت keyframeها فراهم می‌کند و انیمیشن‌های CSS را برای مقیاس‌های متنوعی فراهم می‌کند. همچنین این ابزار به هیچ‌گونه Dependency نیاز ندارد.

68. Cel-animation

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Cel-animation یک مخلوط Sass است که به شما کنترل خوبی بر روی keyframeهای سنتی می‌دهد. شما می‌توانید با استفاده از آن، SVG یا هر نوعی از عناصر HTML را به حرکت در آورید.

69. Scrollissimo

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

Scrollissimo ساخته شده است تا به همراه Greenshock کار کند، و با مهارت و به صورت نرم، آبجکت‌ها را در هنگام اسکرول کردن کاربر پویانمایی کند. این ابزار با داشتن یک پلاگین JavaScript اضافی برای گجت‌های لمسی، دستگاه‌های زیادی را پوشش می‌دهد.

70. jqClouds

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

jqClouds یک پلاگین اولیه است که یک طراحی را تولید کرده، و با ابرهای متحرک پر می‌کند. شما می‌توانید طرح آن را تغییر داده، و ابرها را با هر آبجکت دیگری جایگزین کنید.

71. Color animation

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

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

72. Flubber

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

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

73. Particles.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

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

74. 3D Lines Animation with Three.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

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

75. Three.js

75 ابزار انیمیشن وب که باید امتحان کنید - بخش دوم

و حال آخرین مورد یعنی Three.js، یک کتابخانه قدرتمند و همه کاره است که پشت تعداد زیادی از وبسایت‌ها قرار دارد. این ابزار هم برای پروژه‌های ساده و هم برای پروژه‌های پیچیده مناسب است. Three.js شما را قادر می‌سازد تا با ، ، CSS3D و WebGL کار کنید و انیمیشن‌های سه بعدی دیدنی و جذاب خود را بسازید.

منبع

مقالات پیشنهادی

  • وب سایت های الهام بخش برای طراحی - سری 10

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

    حسام موسوی
  • وب سایت های الهام بخش برای طراحی - سری 8

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

    حسام موسوی