آموزش ساخت افکت انیمیشنی
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 کیلو بایت
- نوشته شده توسط شهربانو دوستی
- بازدید: 10062
دیدگاه‌ها
سلام ، تشکر از سایت خوبتون.
در قسمت زیر اگر بخواهیم که انیمیشن مورد نظر برای مثال فقط 3 بار اجرا بشه باید infinite رو برابر با 3 قرار بدیم ؟! من در مثال این کار رو کردم ولی باز به صورت لوپ اجرا شد!
;animation-itera tion-count:infi nite
سلام، ممنون
اگر در مثال آخر به مقادیری که برای ویژگی Class تنظیم شده دقت کنید، خواهید دید که کلاس infinite تنظیم شده است، بنابراین باید آنرا حذف کنید:
class="animated infinite slideOutRight"
عالی بود.
این پلاگین css است نه جیکوری و بیشتر مربوط میشود به css
با سلام.
دقیقا کدام قسمت منظور شماست دوست عزیز؟
slm linke download in ghesmat ham moshkel dare
lotfan eslah beshe
mamnoon
( Animate.min.css )
با سلام و احترام.
لینک درسته! وقتی روش کلیک کنید یه صفحه باز میشه که کدهای css رو میتونید مشاهده کنید. کافیه کدها رو کپی و در یه فایل paste کنید و ازش استفاده کنید.
با سلام و احترام
من میخوام این فایل پلاگین رو دانلود کنم...ولی خطای 404 میده..مشکلش چیه!؟
با سلام و احترام.
مشکل برطرف شد.
البته این پلاگین رو میتونید در گوگل جستجو کنید و لینک دانلودشو خیلی راحت به دست بیارید.
سلام.
یه سوال.اشکالی نداره از لینک فعلی سایت گیت هاب برای این فایل سی اس اس استفاده کرد؟
(https://raw.github.com/daneden/animate.css/master/animate.css)
مثلا برای ابزار هایی که تو سایت هست یا درکل استفاده توی سایت
با سلام
از نظر استفاده مشکلی نداره اماا این نکته رو در نظر داشته باشید که در صورتی که به هر دلیلی این فایل css از سرور اصلی حذف شود یا دچار مشکل شود برنامه شما هم با مشکل مواجه می شود. شما میتونید این فایلو کپی کنید در اینصورت این مشکل دیگه پیش نمیاد.