متحرک سازی المان ها در وب سایت با Animate.Css
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

۱۰۲۱۳۵۲

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

بالا رفتن