آموزش ساخت افکت انیمیشنی
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
- دانلود مستقیم: Animate.min.css
حجم: 54.48 کیلو بایت
- نوشته شده توسط شهربانو دوستی
- بازدید: 9887