Hướng dẫn Sử dụng WOW.js để tạo hiệu ứng đẹp mắt khi scroll

[PVS]

Sử dụng WOW.js để tạo hiệu ứng đẹp mắt khi scroll

WOW.js được phát triển bởi Matthieu Aussaguel, một kỹ sư lập trình web hiện đang sống và làm việc tại Thái Lan. WOW.js là sự kết hợp giữa jQuery và thư viện animation.css được viết sẵn các kịch bản. Khi bạn scroll website thì jQuery sẽ bắt sự kiện và kích hoạt chuyển động, các đối tượng sẽ chuyển động và diễn hoạt với sự hỗ trợ của CSS 3 Animation và CSS 3 Transition.

Các bạn có thể vào và khám phá trải nghiệm với CSS 3 Animate
​

#Cách sử dụng
Chèn resource vào website
Cách dùng WoW thì rất đơn giản. Trước hết bạn cần phải tải về và chèn 2 tập tin này vào website của mình
– animate.css: Thư viện chuyển động bằng CSS 3 Animation và Transition.
– WoW.js: đoạn code jQuery để bắt sự kiện.
Sau khi tải về xong thì các bạn có thể tiến hành chèn các tập tin vừa chèn vào website của mình.

<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min_.js"></script>
<script>
 new WOW().init();
</script>

Kích hoạt hiệu ứng chuyển động
Sau khi chèn vào xong thì chúng ta sẽ tiến hành thí nghiệm thử với một đoạn code html ví dụ tương tự như sau:

<div class="wow bounceInUp">  Chạy thử nhé !!!  </div>

Khi các bạn reload lại website thì có thể thấy nó chuyển động từ dưới cuối màn hình lên trên.

​

Bây giờ mình sẽ giải thích ý nghĩa của đoạn html trên nhé. Phân tích trong đoạn html trên thì phần class nó có 2 cái là wow và bounceInUp
– class name “wow”: để định nghĩa cho trình duyệt biết rằng đối tượng này được dùng để chuyển động.
– class name “bounceInUp”: định nghĩa tên của loại chuyển động. Tên của các chuyển động này các bạn có thể tìm thấy trong tập tin animate.css hoặc là có thể xem demo ngay trong trong website: https://daneden.github.io/animate.css/
Khi chúng ta kết hợp 2 class name đó lại với nhau thì nó sẽ chuyển động khá đẹp.

Sự kết hợp trong theme Firmness
​

Các data nâng cao
Bây giờ bạn đã có được những hiệu ứng đẹp rồi, nhưng chúng ta vẫn chưa kiểm soát được thời gian chuyển động, số lần chuyển động,…. Bậy giờ bạn thử lại với đoạn code html sau:

<section class="wow bounce" data-wow-duration="2s" data-wow-delay="3s" data-wow-iteration="5">Hello! Xin chào các bạn !!!</section>

Các bạn sẽ thấy rằng, chuyển động sẽ diễn ra trong 2 giây, và sau 3s sẽ lập lại chuyển động đó 1 lần và chuyển động lập trong 5 lần. Bây giờ nhìn vào các data attribute thì chúng ta có thể dễ dàng nhận biết được ý nghĩa của nó rồi chứ nhỉ?

+ data-wow-duration: Thời gian chuyển động của đối tượng.
+ data-wow-delay: Thời gian chờ trước khi đối tượng chuyển động.
+ data-wow-iteration: Số lần lập lại của một chuyển động.
+ data-wow-offset: Khoảng cách giữa đối tượng và điểm cuối màng hình. khi cuộn đến khoảng cách đó, đối tượng sẽ bắt đầu chuyển động.
Các bạn có thể xem cái ví dụ bên dưới này để rõ hơn

​

#Kết luận
Bây giờ bạn có thể áp dụng nó vào trong thực tế với một website nào đó. Chỉ bằng cách áp đặt class tương ứng với chuyển động là thành công.

Trong trường hợp bạn không muốn class mặc định là wow thì chúng ta có thể tiến hành thay đổi bằng cách khai báo như sau:

<link rel="stylesheet" href="https://www.izwebz.com/wp-content/uploads/2014/08/animate.css">
<script src="https://www.izwebz.com/wp-content/uploads/2014/08/wow.min_.js"></script>
<section class="yourClass bounce animated">Hello! Xin chào các bạn !!!</section>
<script>
  wow = new WOW(
    {
      boxClass:     'yourClass',      // default
      animateClass: 'animated', // default
      offset:       0          // default
    }
  )
  WOW.init();
</script>

Bây giờ, thì phần còn lại là phụ thuộc vào sự tưởng tượng của các bạn thôi. Dưới đây là một số website sử dụng WOW để có được hiệu ứng rất đặc biệt.

​

Chúc các bạn thành công.

Nguồn: izwebz.com​