Nội dung

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

2 năm trước, HTML/CSS, jquery, 299 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ài viết mới cập nhập

  • Quản lý mẫu web công ty

    Quản lý mẫu web công ty

    2 tháng trước, 157 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

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

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)