Sử dụng thư viện wow.js làm hiệu ứng cho website

Wow.js là một thư viện giúp làm hiệu ứng cho website tuyệt vời nhất mà mình từng sử dụng trong xuất chặng đường phát triển website của mình. Nó giúp cho website của bạn trở lên sinh động hơn, đẹp mắt hơn và giúp cho người dùng chú ý đến website của bạn hơn. Wow.js không làm ảnh hưởng đến hiệu năng trong website của bạn và cũng không làm hạ điểm khi bạn kiểm tra tốc độ bằng google developer speed.

Hiệu ứng của wow.js

Mình đã tìm thấy 1 trang trình diễn 80% các hiệu ứng mà wow.js có. Bạn có thể xem nó tại đây.

Các bạn thấy hiệu ứng tuyệt vời của wow.js chưa?

Bây giờ mình sẽ bắt đầu hướng dẫn các bạn tích hợp thư viện này vào dự án hoặc trang web cá nhân của các bạn:

Cài đặt wow.js

Bước 1: Thêm thư viện animate.css (đây là cội nguồn hiệu ứng của wow.js) vào phần head của dự án.
Sử dụng lệnh link vào website như sau:
```
<link rel="stylesheet" href="css/animate.css">
```
```
 
```
Bước 2: Tải thư viện và khai báo wow.js
Tải thư viện wow.js tại đây.
Khai báo sử dụng lệnh:
```
<script src="js/wow.min.js"></script>
```
Bước 3: Khởi tạo wow.js
```
var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null,    // optional scroll container selector, otherwise use window,
    resetAnimation: true,     // reset animation on end (default is true)
  }
);
wow.init();
```
Trong đó
+ boxClass: Là class mà thư viện sẽ tìm trong DOM của HTML để gắn hiệu ứng (mặc định là wow).
+ animateClass: Là class mà thư viện sẽ sử dụng (mặc định là animated là class đã khai báo sẵn trong thư viện animate.css)
+ offset: Là khoảng cách từ phần tử làm hiệu ứng đến tác nhân gây hiệu ứng (cụ thể là khi kéo chuột thì thanh scroll đến phần tử theo chiều cao là Offset). Mặc định bằng 0
+mobile: Mặc định là true tức là trên mobile hiệu ứng của wow.js vẫn có tác dụng. Nếu bạn muốn chỉ có hiệu ứng trên máy tính PC & Tablet mà trên mobile không cần (tránh rối mắt người dùng) thì thiết lập giá trị của nó là false.
+ live: Là thuộc tính để tăng hiệu năng hơn khi dùng wow.js. Khi set nó bằng true thì nó sẽ bất đồng bộ và load ra cùng lúc load DOM HTML. Mặc định là true.
+ scrollContainer: Là thuộc tính cho phép bạn sửa không chọn default là scroll của windows (là thanh bên phải màn hình khi kéo chuột nó kéo xuống đó các bạn) nữa. Mặc định là null (tức là thanh scroll bar của windows). Nếu bạn muốn khởi tạo cho 1 vùng nhất định thì hãy đánh tên class vào thuộc tính này nhé.
Ví dụ: Mình muốn khởi tạo chỉ riêng vùng giới thiệu công ty có class ngoài cùng là IntroductionClass thì mình khai báo như sau
```
scrollContainer: '.IntroductionClass'
```
+ resetAnimation: Là thuộc tính cho phép ta khởi tạo lại hiệu ứng khi scroll chuột qua phần tử đó (tức là phần tử đó đã hết hiệu ứng). Mặc định là true.
Bước 4: Thiết lập hiệu ứng của thư viện wow.js
+ Thêm class=”wow” mặc định vào trong phần tử của HTML mà bạn muốn cho nó hiệu ứng.
```
  <div class="wow">
      Content to Reveal Here
  </div>
```
+ Thêm class hiệu ứng vào trong phần từ HTML mà bạn muốn cho nó hiệu ứng. Trong ví dụ đây là class bounceInUp.
```
<div class="wow bounceInUp">
   Content to Reveal Here
</div>
```
Đến đây các bạn có thể xem thử phần tử hiệu ứng của mình bằng cách chạy wesite lên và scrool chột đến vị chí phần tử đó.
Bước 5: Một số thuộc tính tạo hiệu ứng mở rộng của wow.js như sau:
+ data-wow-duration: Thay đổi thời gian mà hiệu ứng tồn tại
+ data-wow-delay: Số thời gian mà dừng lại trước khi hiệu ứng bắt đầu.
+ data-wow-offset: Khoảng cách để xảy ra hiệu ứng (Phụ thuộc vào trình duyệt)
+ data-wow-iteration: Số lần mà mong muốn hiệu ứng xảy ra. Nếu bạn muốn cho hiệu ứng của nó chạy không bao giờ dừng lại. Hãy thiết lập thuộc tính data-wow-iteration=”infinity”.
Ví dụ:
```
 <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>
```
Các bạn chạy lại website của mình và kiểm tra sự khác biệt so với bước 4 nhé.

Đến đây là các bạn biết sử dụng wow.js rồi. Tuy nhiên, làm sao mà bạn có thể nhớ được tên và thuộc tính các hiệu ứng của wow.js.Vâng, các bạn có thể đi kiểm tra hiệu ứng trong trang animate.css này.

Bạn vào đó thích hiệu ứng nào thì tuỳ chọn rồi thiết lập cho phần tử của mình cần có hiệu ứng.

Nếu bạn muốn nhanh và theo đúng ý của khách hàng (đa số khách hàng đều yêu cầu hiệu ứng như trang website mẫu nào đó) thì đọc tiếp nhé (vô số điều hay đó).

Mẹo tra thuộc tính nhanh đẹp mắt trong wow.js
Bước 1: Vào trang có sử dụng wow.js (Cụ thể là phần tử có dùng wow.js) tại đây.
Bước 2: Chọn phần tử thích có hiệu ứng như trong website.
Click chuột phải vào phần tử => Kiểm tra phần tử =>Click chuột phải vào element HTML=> Edit HTML tìm đến các thuộc tính mà website họ khai báo và copy về cho phần tử của mình muốn hiệu ứng tương tự như họ là OK.

Bạn đang đọc bài viết Sử dụng thư viện wow.js làm hiệu ứng cho website tại chuyên mục Javascript, Jquery. Mọi thông tin chia sẻ, phản hồi xin gửi về hòm thư contact@diendanhocweb.com. Hotline 0972.427.500.

Nếu bạn mong muốn và khao khát được chia sẻ kiến thức cho cộng đồng IT hãy liên hệ với nhóm chúng tôi diendanhocweb.com qua email: contact@diendanhocweb.com.

admin

Xin chào, diendanhocweb.com là nơi mình sẽ chia sẻ những thủ thuật, kiến thức về website mà mình tìm hiểu được. Hy vọng, nó sẽ giúp ích cho mọi người.