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

Tham khảo thêm:

• Hiệu ứng khi scroll với AOS
• Kết hợp Cards của Bootstrap 4 với WOW.js

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