Tạo hiệu ứng và chuyển động với Wow.js và Animate.css

Nhiều bạn trẻ làm web hiện nay rất thích các hiệu ứng chuyển động nhằm làm cho website của mình thêm sinh động hơn. Tuy nhiên nhiều bạn không hiểu nhiều về các ngôn ngữ lập trình nên thường copy thư viện hoặc đoạn code nào đó ở website khác về sử dụng.

Cách làm trên không sai, tuy nhiên rất hạn chế ở chỗ là bạn phải phụ thuộc rất nhiều vào thư viện code của họ, đôi khi thiếu một vài dòng lệnh hoặc thư viện bổ sung khác thì có phải là nó không chạy đúng với mong muốn của bạn không nè?

Nếu bạn nào chưa biết về các khái niệm như hiệu ứng, chuyển động, animation là gì? thì có thể xem demo trực tiếp ví dụ tại trang chủ của mình để hiểu hơn rồi hẵn đọc tiếp, click về trang chủ của tôi.

Mục đích của việc làm này là giúp trang web chỉ load nội dung khi bạn scroll chuột tới vị trí được load, hơn nữa có các hiệu ứng hoặc chuyển động nhìn rất thích mắt.

Và rồi cái gì tới cũng sẽ tới, giờ thì mình viết bài này nhằm mục đích hướng dẫn cho các bạn chủ động hơn trong việc tạo ra các hiệu ứng chuyển động như ý muốn với một cách đơn giản nhất.

Hướng dẫn tạo hiệu ứng và chuyển động với Wow và animation

Có nhiều bạn ở đây đã từng nghe rất nhiều về animation phải không nào, đây là một trong những thuộc tính hay của CSS3 giúp bạn tạo các hiệu ứng chuyển động vô cùng mượt mà lại vô cùng nhẹ cho website.

Kết hợp với animation là thư viện wow.js do các nhà lập trình viên nổi tiếng viết ra nhằm hỗ trợ thêm cho việc tạo ra các hiệu ứng khác nhau.

Cách sử dụng nó thì vô cùng đơn giản các bạn ạ, vậy nên đừng lo lắng nhé vì ai cũng có thể làm được.

1. Khai báo sử dụng thư viện

Đầu tiên, các bạn phải download các tập tin wow.js và animate.css về trước đã.

Link download thì các bạn tải về ở đây: wow.min.js | animate.css

Sau khi tải về xong các bạn upload lên hosting của mình hoặc ở đâu đó mà bạn có thể lấy được link của nó nhé.

Bạn tiến hành thêm thư viện wow.js và animate.css vào source code hoặc project của mình. Ở đây mình khuyến khích thêm tập tin animate.css vào thẻ cặp thẻ header, còn wow.js thì đặt ở trước thẻ đóng body.

Đặt thư viện animate.css ở trong cặp thẻ header

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

Đặt thư viện wow.js ở trước thẻ đóng body

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

Và đừng quên thêm đoạn code  new WOW().init();  trong cặp thẻ sau đoạn khai báo thư viện wow.js như ở trên kia nhé. Đoạn code này mục đích là để khai báo sử dụng thư viện wow ở website của bạn đó nên đừng bỏ qua bước quan trọng này nhé.

2. Cách áp dụng vào trang web

Sau khi khai báo các thư viện cần thiết xong, giờ thì bạn áp dụng nó vào bố cục trang web của mình nào. Để sử dụng vô cùng đơn giản, bạn chỉ cần làm như thế này:

<div class="wow bounceInUp">
  Content to Reveal Here
</div>

Có nghĩa là bạn chỉ cần thêm class wow + class tên_hiệu_ứng bao quanh nội dung mà bạn cần tạo hiệu ứng hoặc chuyển động. Đoạn code ở trên mình sử dụng hiệu ứng là  bounceInUp .

Có rất nhiều hiệu ứng và chuyển động khác nhau:

Bạn có thể vào trực tiếp tại website này để vừa xem hiệu ứng kèm theo tên class tương ứng để áp dụng nhé: https://daneden.github.io/animate.css/

Để nâng cao hơn thì bạn có thể khai báo thêm các đối tượng sau đây:

data-wow-duration="2s"

Thời gian chuyển động của đối tượng, ở đây mình ví dụ là 2s.

data-wow-delay="3s"

Thời gian chờ để chuyển động. Khi bạn cuộn màng hình tới đối tượng thì đối tượng cần một khoảng thời gian để bắt đầu chuyển động. Ở ví dụ này là chờ 3s.

data-wow-iteration="5"

Số lần chuyển động lặp lại. Ở ví dụ này là lặp lại 3 lần.

data-wow-offset="100"

Khoảng cách từ đối tượng tới điểm cuối màng hình để đối tượng bắt đầu chuyển động. Ở ví dụ này, khi khoảng cách của đối tượng với màng hình 100px đối tượng sẽ chuyển động.

Vậy thôi, còn lại là bạn tự tìm hiểu nhé vì kiến thức của mình cũng chỉ tới đó thôi, mình cũng chỉ đọc tài liệu trên mạng tự tìm hiểu và chia sẻ lại cho bạn dễ hiểu hơn mà thôi.

Sử dụng wow.js và animate.css để tạo hiệu ứng hoặc chuyển động giúp website của bạn mượt mà hơn và tăng tốc độ load trang web một cách đáng kể. Nếu trước kia chúng ta có hiệu ứng lazyload() hình ảnh bằng JQuery thì giờ đã có animation vô cùng dễ làm

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

Kế tiếp: Cách resize ảnh không bị co giản tỉ lệ bằng css