متحرک سازی المان ها در وب سایت با Animate.Css
دسته‌ها : آموزش های طراحی سایت , کد های کاربردی ۰۸ مهر ۱۳۹۴ - ۱۶:۲۲ امیر رضائی یک نظر
خانه آموزش های طراحی سایتکد های کاربردی متحرک سازی المان ها در وب سایت با Animate.Css

۱۰۲۱۳۵۲

animate.css یک کتابخانه سی اس اس ( CSS ) است که توسط ” دنیل ادن ” ( Daniel Eden ) ساخته شده و توسعه داده می شود . این کتابخانه مجموعه ای از انیمیشن های آماده برای استفاده در پروژه های طراحی و توسعه وب سایت می باشد .

ویژگی ها :

-سازگار با تمامی مرورگرها ( Cross Browser )

-فابل استفاده در فایل های اچ تی ام ال و  جاوا اسکریپت

-متن باز بودن

نحوه استفاده :

فایل animate.css یا animate.min.css را به صفحه اچ تی ام ال خود و بین <head> <head\> اضافه کنید .

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

در فایل اچ تی ام ال خود کلاس انیمیشن مورد نظر را به المان دلخواه خود اضافه کنید مانند زیر :

<h1 class=”animated fadeOut”></h1>
<h1 class=”animated infinite fadeOut”></h1>

در صورت قرار دادن کلاس infinite انیمیشن به صورت مکرر و بی نهایت تکرار می شود در غیر این صورت انیمیشن تنها یکبار اجرا مشود . شما می توانید تعداد تکرار انیمیشن , تاخیر زمان اجرا و طول زمان اجرای آن را با ویرایش سی اس اس تغییر دهید .

شما نیز می توانید از ان در فیل های جاوا اسکریپت مبتنی بر JQuery استفاده کنید و انیمیشن های پویا بسازید .

$(‘#yourelement’).addClass(‘animated fadeUp’);

هم چنین برای پایان انیمیشن :

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

برای درک بهتر استفاده animate.css در JQuery ویدیویی که توسط خود سازنده در یوتیوب گذاشته شده است را مشاهده کنید

نمایش ویدئو

Animate.css تحت لایسنس MIT License منتشر می شود .

دانلود و پیش نمایش

 

امیر رضائی وبسایت


وردپرس را با تمام وجودم دوست دارم و از این رو چندین سال است در زمینه طراحی سایت های وردپرسی و طراحی پوسته های وردپرسی فعالیت می کنم و اعتقادم بر این است که انسان باید آموخته ها و تجربیات خود را با دیگران به اشتراک بگذارد بلاگ تم مکان اشتراک گذاری تجربیات و آموخته های من است

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

یک دیدگاه برای “متحرک سازی المان ها در وب سایت با Animate.Css

  • علی اسلامی در تاریخ اردیبهشت ۱۹, ۱۳۹۶ گفت:

    thanks. it is very useful

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید