WOW.js là một trong những thư viện giúp cho việc tạo hiệu ứng hiển thị trang gây ấn tượng mạnh nhất. WOW.js đặc biệt cuốn hút người xem khi sử dụng cho các website dạng Landing Page. WOW.js làm cho việc hiển thị các đối tượng trên trang trở nên sinh động và mượt mà.

Hiệu ứng khi scroll với WOW.js

Đến WOW.js

Animate.css

WOW.js sử dụng Animate.css, bạn có thể lựa chọn các hiệu ứng tại đây.

Animate.css

Đến Animate.css

Sử dụng

Đầu tiên, bạn cần chèn Animate.css vào trước </head>.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Sau đó, chèn và gọi WOW.js vào trước </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();
</script>

Sử dụng nhanh hiệu ứng:

<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>

Nâng cao:

<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 tùy 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 hãy RERUN lại để thấy hiệu ứng chuyển động khi tải trang.

See the Pen wow.js by @TimLamber (@TimLamber) on CodePen.