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

WOW.js là một trong những thư viện giúp cho việc tạo hiệu ứng khi scroll 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à.

Đế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>