WOW.js là gì?

Vấn đề bất cập khi sử dụng Animate.css đó là mặc định thư viện này sẽ kích hoạt các hiệu ứng khi web của chúng ta được tải xong. Vậy phải làm gì khi muốn cuộn chuột đến thì hiệu ứng xảy ra? Giải pháp là sử dụng thư viện wow.js

Vậy WOW.js là gì ?

WOW.js là một thư viện javascript tuyệt vời với sử kết hợp sử dụng của CSS3 animations để “hành động” và “xuất hiện” các phần tử Html khi chúng ta lăn chuột.

Sử dụng WOW.js đơn giản

Do WOW.js sử dụng các hiệu ứng của Animate.css, vậy nên khi cài, chúng ta cần phải cài 2 file:

• Wow.js
• Animate.css

1. Link file animate.css

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

1. Link và kích hoạt wow.js, hãy đặt ở cuối trang để trang web chạy nhanh hơn

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

1. Hãy chọn thuộc tính từ trang https://daneden.github.io/animate.css/ và gán tên thuộc tính đó bằng với Class của phần tử html mà bạn muốn

<div class="wow bounceInUp" ></div>

Tùy chỉnh Cấu hình nâng cao WOW.js

• data-wow-duration: Sử dụng để thay đổi thời gian chuyển động
• data-wow-delay: Thời gian trì hoãn trước khi bắt đầu
• data-wow-offset: Khoảng cách đến phần tử
• data-wow-iteration: Số lần lặp lại chuyển động đó

Cấu hình tùy chọn (ko quan trọng lắm !)

• boxClass: Tên class hiển thị khi người dùng cuộn xuống.
• animateClass: nên để mặc định là từ thư viện animate.css
• offset: Xác định khoảng cách khi mà lăn chuột đến phần tử đó.
• mobile: Bật tắt trên điện thoại.
• live: check ngay khi sử dụng một phần tử WOW mới.

 wow = new WOW(
 {
 boxClass: 'wow', // default
 animateClass: 'animated', // default
 offset: 0, // default
 mobile: true, // default
 live: true // default
 }
 )
 wow.init();

Demo sử dụng WOW.js

Sử dụng đơn giản với WOW.js và animate.css

Các bác có thể thấy với WOW.js hiệu ứng chỉ chạy một lần đầu

Demo 2

Phần này nâng cao hơn với hiệu ứng khi lăn chuột nên xuống hoặc click -> hiệu ứng sẽ đươc lặp lại