-
2
سبد خرید
-
مجموع سفارش: ۱,۰۰۰.۰۰
- مشاهده سبد خرید تسویه حساب
- 4
-
15
-
آوا
مدیر
کتابخانه WOW
نمونه انیمیشن WOW
1راهاندازی wow.js
(میتوانید با تغییر تنظیمات wow.js به کتابخانه CSS انیمیشن دیگری لینک دهید)<link rel="stylesheet" href="css/animate.css" >2لینک و فعالسازی wow.js
< script src="js/wow.min.js" > < /script >
< script >
< /script >
< script >
WOW.init();< /script >
3قابل مشاهده کردن یک المان
(میتوانید این کلاس CSS را در تنظیمات WOW تغییر دهید تا از تداخل نامها جلوگیری شود.)کلاس CSS .wow را به یک المان HTML اضافه کنید: تا زمانی که کاربر به آن اسکرول نکند، نامرئی خواهد بود.
< div class="wow" >
< /div >
محتوا برای نمایش اینجا< /div >
4انتخاب سبک انیمیشن
یک سبک انیمیشن در Animate.css انتخاب کنید و سپس کلاس CSS را به المان HTML اضافه کنید< div class="wow bounceInUp" >
< /div >
محتوا برای نمایش اینجا< /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 را فعال میکند (بهصورت پیشفرض ’animated’ برای کتابخانه animate.css)
offset: فاصله بین پایین نمای مرورگر و بالای جعبه مخفی را تعریف میکند.
وقتی کاربر به این فاصله رسید، جعبه مخفی نمایش داده میشود.
mobile: فعال/غیرفعال کردن wow.js در دستگاههای موبایل.
live: بهطور مداوم وجود عناصر WOW جدید در صفحه را بررسی میکند.
wow = new WOW(
{
boxClass: 'wow', // پیشفرض
animateClass: 'animated', // پیشفرض
offset: 0, // پیشفرض
mobile: true, // پیشفرض
live: true // پیشفرض
}
)
wow.init();