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

0 1.326

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.

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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ệ

Bạn cũng có thể thích
Để lại một trả lời

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