Tích hợp hiệu ứng wowjs cuộn trang Animate vào website

12 tháng trước, HTML/CSS, jquery, 8 Lượt xem

Tiết lộ hình ảnh động khi bạn cuộn. Very Animate.css Bạn bè 🙂
Dễ dàng tùy chỉnh cài đặt hoạt hình: kiểu, độ trễ, độ dài, độ lệch, số lần lặp …
100% MIT được cấp phép, không phải GPL. Giữ mã của bạn.
ES2015 +, Caffeine tự nhiên miễn phí.

Link thư viện wow

https://wowjs.uk/

https://wowjs.uk/docs

Chèn thư viện js vào wordpress

Link down

https://drive.google.com/file/d/1AQStDLJkOGcfZ4r_fGUbadS9N51ESzoG/view?usp=sharing

Để acticve wowjs bạn phải chèn đoạn mã này

<script src="<?php echo get_template_directory_uri(); ?>/js/wow.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/css/animate.css">
     <script>
     new WOW().init();
     </script>

Set thời gian hiệu ứng

data-wow-duration: Thay đổi thời lượng hoạt hình
data-wow-delay: Trì hoãn trước khi hoạt hình bắt đầu
data-wow-offset: Khoảng cách để bắt đầu hoạt hình (liên quan đến đáy trình duyệt)
data-wow-iteration: Số lần hoạt hình được lặp lại

<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>

 

Thư viện animate

https://daneden.github.io/animate.css/

xem hướng dẫn trên github

https://github.com/daneden/animate.css

Bình luận trên facebook netweb.vn