استفاده از Animate.css

اگر تا کنون نام animate.css به گوشتان نرسیده است باید بدانید که این پلاگین، یکی از محبوب ترین و پراستفاده ترین پلاگین های زبان CSS میباشد.

این پلاگین را میتوانید از این آدرس دانلود کنید.

همانگونه که در آدرس بالا مشاهده میکنید، یک منوی دارپ داون وجود دارد که در آنجا میتوانید انواع انیمیشن های موجود در این پلاگین را مشاهده کنید. به فرض مثال شما میخواهید یک div ایجاد کنید و میخواهید این div در هنگام نمایش ابتدا یک انیمیشن داشته باشد.

اگر لینکی که در بالا آورده شده بود را باز کرده باشید، متوجه میشوید که در آنجا لیستی از انواع انیمیشن ها وجود دارد و هرکدام از این انیمیشن ها یک اسم دارند. به فرض مثال ما میخواهیم از انیمیشن flash استفاده کنیم.

برای این کار کافی است که ابتدا فایل مربوط به animate.css را ضمیمه کنید و دو کلاس animated و نام آن انیمیشن مورد نظر را به div مورد نظر بدهید:

<link rel="stylesheet" href="path/to/animate.css">

<div class="animated flash">
</div>

یک پلاگین دیگر که خیلی پرکاربرد است، و همراه با animate.css استفاده میشود، wow.js است. wow.js نیز یک پلاگین میباشد و با استفاده از آن میتوانید امکانات بیشتری به animate.css بدهید.

ابتدا به این آدرس بروید و wow.js را دانلود کنید : www.wowjs.uk

اگر میخواهید انیمیشن موردنظر شما هنگامی شروع شود که به div مورد نظر اسکرول شود، باید از این پلاگین استفاده کنید. برای استفاده از این پلاگین ابتدا نیاز دارید که پلاگین مورد نظر را دانلود و ضمیمه کنید. سپس نیاز دارید با یک خط کد جاواسکریپت استارت استفاده از این پلاگین را بزنید.

<script src="path/to/wow.min.js"></script>
<script>
new WOW().init();
</script>

حال کافی است در کدهای HTML به جای اینکه از کلاس animated استفاده کنید، از کلاس wow استفاده کنید

<div class="wow flash">
</div>

حال؛ انیمیشن flash زمانی اجرا میشود که به روی div مورد نظر اسکرول شود. توجه داشته باشید که برای استفاده از wow.js نیاز دارید که animate.css را نیز ضمیمه کرده باشید.