تبلیغات

کتابخانه animate برای css

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

animate.min مجموعه ای از افکت های انیمیشنی بسیار زیبا و جذاب CSS3 است که می توان به آسانی از آن استفاده کرد. پس از دانلود فایل animate.css  از آخر پست و متصل کردن آن به صفحه، کافی است به عناصر صفحه‌ کلاسی با نام افکت مورد نظر داد تا افکت انتخابی اجرا شود.

 آموزش استفاده

در قدم اول لازمه که کتابخانه رو لود کنید:

در مرحله دوم کلاس animate را به عناصری که می خواهیم دارای انیمیشن باشند اضافه می کنیم، همچنین می توان کلاس infinite را برای عناصری که می خواهیم  به صورت loop یا چرخشی اجرا شوند تعریف کرد . (با فعال کردن آن می توانید انیمیشن را از نوع تکرار شدنی تا بی نهایت داشته باشید).

در پایان یکی از متد های تعریف شده در زیر را برای کلاس animate  انتخاب می کنیم :

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

مثال:

استفاده از جی کوئری و این کتابخانه

می توان  کد های جی کوئری یا css را با animate.css ترکیب کرد و انیمیشن های جذاب تری ایجاد کرد.

مثالی از استفاده از کدهای جی کوئری:

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

توجه: از () jQuery.one زمانی استفاده می شود که بخواهیم انیمیشن را به صورت دستی بیش از یک بار اجرا کنیم.

مدت زمان اجرا، زمان تاخیر و غیره را می توان برای یک انیمیشن به دلخواه تنظیم کرد.

توجه: در مثال بالا به جای پیشوند vendor می بایست از ارائه دهنده های مثل webkit, moz و غیره استفاده کرد.

 

مشخصات فایل و دانلود

  • پسورد (در صورت نیاز) www.fullkade.com
تبلیغات
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک‌گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس فول استک

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه