WOW.JS LÀ GÌ ??

Wow.js là một thư viện của javascript với sự kết hợp sử dụng của CSS3 animation giúp cho website của bạn trở nên sinh động hơn, đẹp mắt hơn và giúp cho người dùng chú ý đến website của bạn hơn. Vậy là thế nào để sử dụng được Wow.js

Bước 1: Tải thư viện wow.js

Tải thư viện tại đây   https://github.com/graingert/WOW/ Tại đây tải 2 fille wow.js (hoặc wow.min.js) trong mục dist và animate.css trong mục css/libs
  • Liên kết link
<script src=”js/wow.min.js”></script> <script> new WOW().init(); </script>

Bước 2: Thêm thư viện animate.css

Trong phần head thêm link: <link rel=”stylesheet” href=”css/animate.css”>

Bước 3: Sử dụng hiệu ứng của wow.js

Thêm class = “wow” mặc định vào trong phần tử của HTML mà bạn muốn tạo hiệu ứng. <div class=”wow”> Content to Reveal Here </div>
  • Thêm class tạo hiệu ứng vào trong thẻ class của phần tử. Ví dụ ta muốn thêm class bounceInUp
<div class=”wow bounceInUp”> Content to Reveal Here </div>

Bước 4: Một số thuộc tính tạo hiệu ứng mở rộng của wow.js

  • data-wow-duration: thời gian mà hiệu ứng hoạt động
  • data-wow-delay: delay 1 khoảng thời gian trước khi hiệu ứng bắt đầu
  • data-wow-offset: khoảng cách xảy ra hiệu ứng (phụ thuộc vào từng trình duyệt)
  • data-wow-iteration: số lần hiệu ứng xảy ra ( nếu bạn muốn hiệu ứng xảy ra vĩnh viễn, thiết lập data-wow-iteration = “infinite”
Như vậy các bạn đã có thể sử dụng các hiệu ứng trong wow.js rồi chứ. Các bạn có thể tham khảo thêm các hiệu ứng của wow.js tại https://daneden.github.io/animate.css/