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

  • Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    2 ngày trước, 640 Lượt xem

    Cổng mặc định cho SSH trên hệ thống Linux là 22. Có một vài lý do khiến bạn có thể muốn thay đổi cổng này thành một số khác. Nếu nhiều máy…

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)