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

Admin

7 năm trước

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

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