WOW.js – Tạo hiệu ứng cho trang web khi cuộn chuột
Nếu các bạn đã từng ứng dụng Animate.css để tạo hiệu ứng cho trang web thì ắt hẳn các bạn có thể gặp một số vấn đề nho nhỏ. Đó là thư viện này sẽ mặc định tự kích hoạt các hiệu ứng khi trang web được tải xong. Dù cho khu vực đó trong trang vẫn chưa được cuộn tới. Điều này tuy không ảnh hưởng gì đến ...
Nếu các bạn đã từng ứng dụng Animate.css để tạo hiệu ứng cho trang web thì ắt hẳn các bạn có thể gặp một số vấn đề nho nhỏ. Đó là thư viện này sẽ mặc định tự kích hoạt các hiệu ứng khi trang web được tải xong. Dù cho khu vực đó trong trang vẫn chưa được cuộn tới. Điều này tuy không ảnh hưởng gì đến việc hiển thị. Tuy nhiên nó sẽ cảm giác hơi “ức chế” đối với chúng ta, vì đơn giản là ta đang muốn “show hàng” cái hiệu ứng kia mà. Vậy làm thế nào để khi cuộn chuột đến thì hiệu ứng mới xảy ra? Đương nhiên chúng ta sẽ cần đến sự can thiệp của JavaScript. Nhưng các bạn không cần phải lo. Mọi chuyện đã được sự trợ giúp hết sức đắc lực từ thư viện WOW.js
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. Bây giờ chúng ta hãy bắt tay vào ứng dụng WOW.js cho dự án của mình xem như thế nào các bạn nhé?
Hướng dẫn thiết lập WOW.js cho trang web
Bước 1: Nhúng thư viện Animate.css vào trong tài liệu HTML
Chúng ta sẽ nhúng file css của thư viện vào bên trong cặp thẻ <head>.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css”>
Bước 2: Nhúng thư viện WOW.js và kích hoạt thư viện này cho trang web. Tốt nhất các bạn nên đặt mã nguồn này ở phía thẻ body đóng </body>.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js”></script> <script> new WOW().init(); </script>
Các bạn có thể truy cập vào trang chủ của WOW.js tại đây để tải bản mới nhất. Tại thời điểm bài viết này, phiên bản của nó là 1.1.2
Bước 3: Tạo mã nguồn kích hoạt hiệu ứng cho phần tử mong muốn. Ví dụ ta có muốn thêm hiệu ứng cho phần tử div#demo có mã nguồn như sau:
<div id=”demo “>This is my Example with Animate.css</div>
Thì ta sẽ viết lại mã nguồn bằng cách thêm class wow cho phần tử như sau:
<div id=”demo” class=”wow”>This is my Example with Animate.css</div>
Class wow này sẽ làm cho phần tử ẩn đi cho đến khi nào người dùng cuộn chuột đến khu vực có chứa nó. Tiếp theo ta sẽ thêm class hiệu ứng tương ứng từ thư viện Animate.css nữa là xong. Ví dụ ta lựa chọn hiệu ứng bounceIn chẳng hạn, ta sẽ viết lại mã nguồn như sau:
<div id=”demo” class=”wow bounceIn”>This is my Example with Animate.css</div>
Vậy là xong, phần tử sẽ tự động kích hoạt hiệu ứng chỉ khi nào người dùng cuộn trang đến khu vực có chứa nó. Các bạn có thể xem trước phần demo trên trang chủ của WOW.js tại đây.
Các tùy chỉnh nâng cao
Tùy chỉnh thời gian hiệu ứng thông qua thuộc tính data
WOW.js cho phép thiết lập thời gian hiệu ứng thông qua thuộc tính data, cụ thể như sau:
data-wow-duration: Thời gian xảy ra hiệu ứng.
data-wow-delay: Độ trễ trước khi hiệu ứng bắt đầu.
data-wow-offset: Khoảng cách của phần tử so với viền dưới khung trình duyệt. Khi cuộn chuột đến khoảng cách này thì hiệu ứng sẽ được kích hoạt. Mặc định là 0, tức là phần tử vừa được cuộn tới sẽ chạy hiệu ứng. Tùy chỉnh này ít khi được sử dụng.
data-wow-iteration: Số lần lặp lại của hiệu ứng.
Ví dụ ta muốn thời gian xảy ra hiệu ứng là 2s, độ trễ là 0.2s và lặp lại 2 lần. Ta sẽ có mã nguồn tương tự như sau:
<div id=”demo” class=”wow bounceIn” data-wow-duration=”2s” data-wow-delay=”.2s” data-wow-iteration=”2″> This is my Example with Animate.css </div>
Tùy chỉnh thiết lập mặc định của WOW.js
Ngoài tùy chỉnh thiết lập thời gian qua thuộc tính data, WOW.js còn cho phép tùy chỉnh thiết lập mặc định. Ví dụ
var wow = new WOW({
boxClass: ‘wow’, // default
animateClass: ‘animated’, // default
offset: 0, // default
mobile: true, // default
live: true, // default
callback: function(element) {} // custom function
});
wow.init();
boxClass: tên class để kích hoạt WOW.js cho phần tử. Mặc định là wow, các bạn có thể thay đổi thành bất cứ tên nào khác tùy thích.
animateClass: tên class để kích hoạt hiệu ứng. Ở đây WOW.js sử dụng Animate.css nên class mặc định sẽ là animated.
offset: Ý nghĩa tương tự data-wow-offset.
mobile: Bật hoặc tắt hiệu ứng đối với các thiết bị di động.
live: Bật hoặc tắt chức năng liên tục kiểm tra để áp hiệu ứng cho các phần tử vừa mới được thêm vào trang (thường là thêm vào thông qua JavaScript).
callback: hàm được kích hoạt mỗi khi hiệu ứng được kích hoạt, mặc định là null. Đối số element là phần tử được kích hoạt hiệu ứng
Kết luận
Thông qua thư viện WOW.js, các bạn đã tạo hiệu ứng cho trang web khi cuộn chuột một cách hết sức đơn giản. Việc còn lại là phụ thuộc vào trí tưởng tượng của các bạn. Tuy nhiên, đừng quá lạm dụng nó các bạn nhé. Giờ là lúc các bạn tự tay áp dụng nó vào trong dự án của mình!
