wow.js - Hướng dẫn tạo hiệu ứng khi cuộn chuột

WOW.js là gì?

WOW.js hay WOWjs là thư viện javascript được tạo bởi Matt Aussaguel – Founder của webiste UpLabs, cộng đồng dành riêng cho designer và developer. Tính năng chính của nó là kết hợp với thư viện Animate.css để kích hoạt hiệu ứng khi cuộn chuột. Nghĩa là chỉ khi nào chúng ta cuộn chuột đến phần tử đó thì hiệu ứng mới được kích hoạt. Thay vì như thông thường, Animate.css sẽ tự động kích hoạt toàn bộ hiệu ứng khi trang web được tải xong. 

Hướng dẫn thiết lập WOW.js cho trang web

1. Thêm JS và CSS

WOW.js sử dụng animate.css , do đó bạn cần phải thêm vào:

<link rel='stylesheet' href='https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css'>
<script src='https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js'></script>

2. HTML

<div class="row"> 
<div data-wow-delay="0.5s" class="wow rollIn"> 
<img src="http://mynameismatthieu.com/WOW/img/wow-3.gif" height="20> </div> 
<div data-wow-delay="1s" class="wow bounceInDown center"> 
<img src="http://mynameismatthieu.com/WOW/img/wow-4.gif" height="20> </div> 
<div data-wow-delay="1.5s" class="wow bounceInRight"> 
<img src="http://mynameismatthieu.com/WOW/img/wow-9.gif" height="20> </div>
</div>

3. GỌI WOW.JS

<script>
new WOW().init();
</script>

TUỲ CHỌN NÂNG CAO

WOW.js cung cấp nhiều tuỳ chọn để giúp bạn tạo các hiệu ứng chuyển động phù hợp với website của mình.

• data-wow-duration: Thời gian thực hiện hiệu ứng

• data-wow-delay: Độ trễ trước khí thực hiện hiệu ứng

• data-wow-offset: Khoảng cách để bắt đầu thực hiện hiệu ứng 

• data-wow-iteration: Số lần thực hiện hiệu ứng

=>> DEMO

Bản Quyền || Cấm sao chép nội dung dưới mọi hình thức. Nếu muốn sao chép hãy để 5 phút đọc xong các chính sách của chúng tôi tại đây.

Tác giả: Minh Trung