برگزیده های پرشین تولز

انیمیت کردن عناصر صفحه وب با Animate.css

amuzeshtak

کاربر تازه وارد
تاریخ عضویت
2 دسامبر 2017
نوشته‌ها
10
لایک‌ها
2
محل سکونت
ایران
در این مقاله میخوایم روش انیمیت کردن عناصر صفحه وب با کتابخانه Animate.css رو یاد بگیریم

قدم اول : دانلود و آپلود کتابخانه
برای دانلود این کتابخانه کلمه Animate.css رو توی گوگل سرچ کنید تا بتونید وارد صفحه این کتابخانه بشید که با صفحه زیر روبه رو خواهید شد:

animate.JPG

حالا در این قسمت بر روی Download Animate.css کلیک کنید تا این کتاب خانه براتون دانلود بشه

قدم دوم : اضافه کردن کتابخانه به صفحات پروژه
همون طوری که در تگ head به صفحات استایل (Style.css) لینک میدیم باید این کتابخانه رو هم به صورت زیر لینک بدیم :

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

قدم سوم : افزودن انیمیشن به یک عنصر
برای افزودن انیمیشن ما براحتی میریم که یک کلاس رو به عنصر خودمون اضافه کنیم ، پس اگر عنصر زیر رو داشته باشیم :

HTML:
<img src="/images/logo.png" />

در اینجا ما ابتدا کلاس منبع یعنی " animated " رو به عنصر مورد نظر اضافه میکنیم و بعد براحتی میتونیم کلاس افکت های متفاوت رو هم به عنصر اضافه کنیم ، به این صورت :

HTML:
<img src="/images/logo.png" class="animated" />

قدم چهارم: افزودن کلاس افکت های متفاوت به عنصر
در صفحه اصلی این کتابخانه شما میتونید تمامی کلاس ها رو مشاهده کنید که در زیر چند نمونه از این کلاس رو برای شما آوردیم :

bounce
shake
wobble
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInLeftBig
fadeInRight
fadeInRightBig
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
slideInDown
slideInLeft
slideInRight
slideInUp
الان کافیه که یکی از این کلاس ها رو هم به عنصر مورد نظر خودمون اضافه کنیم ، به این صورت :

HTML:
<img src="/images/logo.png" class="animated zoomIn " />

خوب الان به لود شدن صفحه ما عنصر ماهم متحرک خواهد بود .

آموزش ویدیویی این مقاله همراه با کتابخانه WOW.js رو میتونید در سایت آموزش تک مشاهده کنید .

موفق باشید.
 
Last edited:
بالا