انیمیشن‌های پرکاربرد wow در طراحی سایت

شروع موضوع توسط nooshin88 ‏6 آوریل 2017 در انجمن مسایل عمومی طراحی و توسعه‌وب

  1. nooshin88

    nooshin88 Member

    ارسال‌ها:
    48
    تشکر شده:
    3
    امتیاز دستاورد:
    8
    [​IMG]

    شاید برایتان جالب باشد که بدانید چگونه می توان یک یا چند تگ HTML را با انیمیشن های متفاوت در صفحه وب ظاهر کرد؟ در این مقاله قصد داریم پلاگین wow را به شما معرفی کنیم.

    زمانی که صفحه وب را باز نمایید محتوای صفحه به صورت پیش فرض نامرئی (opacity=0) هستند و هنگام اسکرول صفحه وب, محتوا با انیمیشن خاصی ظاهر می شود که این انیمیشن مربوط به css می‌باشد. همچنین شما می‌توانید به آسانی تنظیمات آن را تغییر دهید.

    مزایا:

    حجم آن نسبت به پلاگین‌های جاوا اسکریپت کمتر می‌باشد.
    نصب فوق العاده آسان
    اجرای سریع و حجم کد کمتر
    امکان تغییر تنظیمات

    دمو آنلاین

    انیمیشن های css

    راهنمای نصب wow:

    1-لینک css
    کد (Text):

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

    2-لینک js

    کد (Text):

    <script src="/js/wow.min.js"></script>
     
    3-قرار دادن کد زیر در فایل js

    کد (Text):

    <script>
    new WOW().init();
    </script>
     
    4-کلاس wow به المان مورد نظر

    کد (Text):

    <div class="wow">
    Content to Reveal Here
    </div>
     
    5-انتخاب استایل css

    کد (Text):

    <div class="wow bounceInUp">
     
    محتوا اینجا قرار می‌گیرد
    کد (Text):

    </div>
     
    موارد دیگر:

    data-wow-duration: مدت زمان انیمیشن
    data-wow-delay:تاخیر انیمیشن
    data-wow-iteration:تعداد دفعات تکرار انیمیشن
    data-wow-offset:فاصله شروع انیمیشن تا المان مورد نظر

    کد (Text):

    <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:تیک کردن المان های جدید
    کد (Text):

    wow = new WOW(
    {
    boxClass: 'wow', // default
    animateClass: 'animated', // default
    offset: 0, // default
    mobile: true, // default
    live: true // default
    }
    )
    wow.init();
     
    منبع: انیمیشن در صفحات وب
     
    نوشته شده توسط nooshin88 در ‏6 آوریل 2017

به اشتراک بگذارید