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

DEMO یا پیش نمایش پلاگین animate.css

برای مشاهده نتیجه کار، روی لینک زیر کلیک نمایید:

مراحل استفاده از پلاگین

ابتدا پلاگین animate را در قسمت <head> سند HTML فراخوانی می کنیم.

مثال (آموزش ساخت افکت انیمیشنی)

<head>
  <link rel="stylesheet" href="/animate.min.css">
</head>
 

 در مرحله دوم کلاس 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

مثال (آموزش ساخت افکت انیمیشنی)

<img src="/img/beyamooz_logo.png"class="animated infinite zoomOutDown">
خودتان امتحان کنید »

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

در  مثال زیر نحوه استفاده از کد های جی کوئری به همراه animate.css قرار داده شده است .

مثال (آموزش ساخت افکت انیمیشنی)

$('#yourElement').addClass('animated bounceOutLeft');

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

مثال (آموزش ساخت افکت انیمیشنی)

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

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

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

مثال (آموزش ساخت افکت انیمیشنی)

} yourElement# 

 ; -vendor-animation-duration: 3s

; -vendor-animation-delay: 2s

 ; vendor-animation-iteration-count: infinite

{

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

مثال (آموزش ساخت افکت انیمیشنی)

<style>
 } animated. 
 ;webkit-animation-duration: 4s
 ;animation-duration:4s
;animation-delay: 2s
;animation-iteration-count:infinite
{

</style>
<body>

<" img src= "beyamooz_logo.png" class="animated infinite slideOutRight>

خودتان امتحان کنید »

دانلود فایل های پلاگین Animate.css

حجم: 54.48 کیلو بایت