Bài 17: Tạo hiệu ứng load phần tử khi cuộn trang với thư viện wow.js

0

Trong bài này, mình sẽ hướng dẫn bạn tạo hiệu ứng load phần tử khi cuộn trang với thư viện wow.js. Kết thư viện wow.js và animate.css, chúng ta sẽ viết code js rất ít.

Video – Tạo hiệu ứng load phần tử khi cuộn trang với thư viện wow.js

Ý tưởng

+ Dùng thư viện animate.css để giảm việc code css

+ Dùng thư viện wow.js để giảm việc code js.

+ Hiệu ứng load phần tử khi cuộn trang tương tự bài 15 và bài 16.

Hướng dẫn chi tiết

Tải animate.csswow,js

Thêm 2 thẻ link và script

<link rel="stylesheet" href="css/animate.css">
<script type="text/javascript" src="js/wow.min.js"></script>

Phần HTML

Các khối cần hiệu ứng chỉ cần thêm 1 class wow và 1 class hiệu ứng của animate.css

<div class="content">
   <img src="img/1.jpg">
   <img class="wow bounceInUp" data-wow-delay="1s" src="img/1.png">
   <img class="wow bounceInUp " src="img/3.jpg">
</div>

Phần CSS

.hinh-2{
   opacity: 0;
}
.hinh-3{
   opacity: 0;
}

Phần JS

<script>
   new WOW().init();
</script>

Ngoài ra, bạn có thể tùy chỉnh lại hiệu ứng bằng cách thêm 1 số thuộc tính cho thẻ html như

data-wow-duration: Thay đổi thời gian
data-wow-delay: Delay hiệu ứng
data-wow-offset: Xác định vị trí hiệu ứng sẽ diễn ra (tính từ bottom của web)
data-wow-iteration: Số lần lặp lại hiệu ứng

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.