انیمیشن Wow

مثال انیمیشن WOW
1راه اندازی wow.js
(می توانید با تغییر تنظیمات wow.js به کتابخانه انیمیشن CSS دیگری پیوند دهید)
<link rel="stylesheet" href="css/animate.css" >
2wow.js را لینک و فعال کنید
< script src="js/wow.min.js" > < /script > 
< script > 
  WOW.init();
< /script >
3یک عنصر را آشکار کنید
(برای جلوگیری از تداخل نام، می توانید این کلاس CSS را در تنظیمات WOW تغییر دهید.)
کلاس CSS .wow را به یک عنصر HTML اضافه کنید: تا زمانی که کاربر برای آشکار کردن آن پیمایش نکند، نامرئی خواهد بود.
< div class="wow" > 
مطالبی که در اینجا آشکار می شود
< /div >
4سبک انیمیشن را انتخاب کنید
یک سبک انیمیشن را در Animate.css انتخاب کنید، سپس کلاس CSS را به عنصر HTML اضافه کنید.
< div class="wow bounceInUp" > 
مطالبی که در اینجا آشکار می شود
< /div >
اضافیگزینه های پیشرفته

data-wow-duration: مدت زمان انیمیشن را تغییر دهید
data-wow-delay: تاخیر قبل از شروع انیمیشن
data-wow-offset: فاصله شروع انیمیشن (مربوط به پایین مرورگر)
data-wow-iteration: تعداد دفعات تکرار انیمیشن

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">
</section>
تنظیماتتنظیمات را سفارشی کنید

boxClass: نام کلاس که کادر مخفی را هنگام اسکرول کاربر نشان می دهد.

animateClass: نام کلاسی که انیمیشن‌های CSS را فعال می‌کند (به طور پیش‌فرض برای کتابخانه animate.css "متحرک" شده است)

offset: فاصله بین پایین نمای مرورگر و بالای کادر مخفی را مشخص کنید.
هنگامی که کاربر اسکرول می کند و به این فاصله می رسد، کادر مخفی آشکار می شود.

mobile: wow.js را در دستگاه های تلفن همراه روشن/خاموش کنید.

live: به طور مداوم عناصر WOW جدید را در صفحه بررسی کنید.

wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();