سبد خرید (0)

تبلیغات

آموزش ساخت افکت انیمیشنی

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 کیلو بایت

دیدگاه‌ها  

0 # رادین 1396-05-26 19:51
سلام ، تشکر از سایت خوبتون.

در قسمت زیر اگر بخواهیم که انیمیشن مورد نظر برای مثال فقط 3 بار اجرا بشه باید infinite رو برابر با 3 قرار بدیم ؟! من در مثال این کار رو کردم ولی باز به صورت لوپ اجرا شد!

;animation-itera tion-count:infi nite
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-05-28 08:50
سلام، ممنون
اگر در مثال آخر به مقادیری که برای ویژگی Class تنظیم شده دقت کنید، خواهید دید که کلاس infinite تنظیم شده است، بنابراین باید آنرا حذف کنید:
class="animated infinite slideOutRight"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # لیلا 1395-09-06 22:52
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیرکیان 1395-07-22 18:31
این پلاگین css است نه جیکوری و بیشتر مربوط میشود به css
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-23 00:00
با سلام.
دقیقا کدام قسمت منظور شماست دوست عزیز؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # maryhobnob 1395-02-26 17:36
slm linke download in ghesmat ham moshkel dare
lotfan eslah beshe
mamnoon
( Animate.min.css )
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-23 00:01
با سلام و احترام.
لینک درسته! وقتی روش کلیک کنید یه صفحه باز میشه که کدهای css رو میتونید مشاهده کنید. کافیه کدها رو کپی و در یه فایل paste کنید و ازش استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # azadeh ahmadi 1394-08-03 08:56
با سلام و احترام
من میخوام این فایل پلاگین رو دانلود کنم...ولی خطای 404 میده..مشکلش چیه!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-03 10:00
با سلام و احترام.
مشکل برطرف شد.
البته این پلاگین رو میتونید در گوگل جستجو کنید و لینک دانلودشو خیلی راحت به دست بیارید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Abolfazl... 1394-06-04 14:16
سلام.
یه سوال.اشکالی نداره از لینک فعلی سایت گیت هاب برای این فایل سی اس اس استفاده کرد؟
(https://raw.github.com/daneden/animate.css/master/animate.css)
مثلا برای ابزار هایی که تو سایت هست یا درکل استفاده توی سایت
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شهربانو دوستی 1394-06-04 14:37
با سلام
از نظر استفاده مشکلی نداره اماا این نکته رو در نظر داشته باشید که در صورتی که به هر دلیلی این فایل css از سرور اصلی حذف شود یا دچار مشکل شود برنامه شما هم با مشکل مواجه می شود. شما میتونید این فایلو کپی کنید در اینصورت این مشکل دیگه پیش نمیاد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی