انیمیشن‌های پرکاربرد wow در طراحی سایت |
7 سال 6 ماه قبل - 7 سال 6 ماه قبل #554
توسط nooshin88
شاید برایتان جالب باشد که بدانید چگونه می توان یک یا چند تگ HTML را با انیمیشن های متفاوت در صفحه وب ظاهر کرد؟ در این مقاله قصد داریم پلاگین wow را به شما معرفی کنیم.
زمانی که صفحه وب را باز نمایید محتوای صفحه به صورت پیش فرض نامرئی (opacity=0) هستند و هنگام اسکرول صفحه وب, محتوا با انیمیشن خاصی ظاهر می شود که این انیمیشن مربوط به css میباشد. همچنین شما میتوانید به آسانی تنظیمات آن را تغییر دهید.
مزایا:
حجم آن نسبت به پلاگین‌های جاوا اسکریپت کمتر میباشد.
نصب فوق العاده آسان
اجرای سریع و حجم کد کمتر
امکان تغییر تنظیمات
دمو آنلاین
راهنمای نصب wow:
1-لینک css
2-لینک js
3-قرار دادن کد زیر در فایل js
4-کلاس wow به المان مورد نظر
5-انتخاب استایل css
موارد دیگر:
data-wow-duration: مدت زمان انیمیشن
data-wow-delay:تاخیر انیمیشن
data-wow-iteration:تعداد دفعات تکرار انیمیشن
data-wow-offset:فاصله شروع انیمیشن تا المان مورد نظر
سفارشی سازی انیمیشن:
boxClass:نام کلاس
animateClass:نام کلاس برای انیمیشن ها
mobile: فعال یا غیر فعال نمودن پلاگین در دستگاه موبایل
live:تیک کردن المان های جدید
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
منبع: انیمیشن در صفحات وب ستروکیت
شاید برایتان جالب باشد که بدانید چگونه می توان یک یا چند تگ HTML را با انیمیشن های متفاوت در صفحه وب ظاهر کرد؟ در این مقاله قصد داریم پلاگین wow را به شما معرفی کنیم.
زمانی که صفحه وب را باز نمایید محتوای صفحه به صورت پیش فرض نامرئی (opacity=0) هستند و هنگام اسکرول صفحه وب, محتوا با انیمیشن خاصی ظاهر می شود که این انیمیشن مربوط به css میباشد. همچنین شما میتوانید به آسانی تنظیمات آن را تغییر دهید.
مزایا:
حجم آن نسبت به پلاگین‌های جاوا اسکریپت کمتر میباشد.
نصب فوق العاده آسان
اجرای سریع و حجم کد کمتر
امکان تغییر تنظیمات
دمو آنلاین
راهنمای نصب wow:
1-لینک css
<link rel="stylesheet" href="/css/animate.css"> <script src="/js/wow.min.js"></script>3-قرار دادن کد زیر در فایل js
<script>
new WOW().init();
</script>4-کلاس wow به المان مورد نظر
<div class="wow">
Content to Reveal Here
</div>5-انتخاب استایل css
<div class="wow bounceInUp">
محتوا اینجا قرار می‌گیرد
</div>data-wow-duration: مدت زمان انیمیشن
data-wow-delay:تاخیر انیمیشن
data-wow-iteration:تعداد دفعات تکرار انیمیشن
data-wow-offset:فاصله شروع انیمیشن تا المان مورد نظر
<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:نام کلاس برای انیمیشن ها
mobile: فعال یا غیر فعال نمودن پلاگین در دستگاه موبایل
live:تیک کردن المان های جدید
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();منبع: انیمیشن در صفحات وب ستروکیت
لطفاً ورود یا ايجاد حساب كاربری برای پیوستن به بحث.
مدیران انجمن: developzoom
