Bài 16: Tạo hiệu ứng bằng thư viện animate.css
Trong bài này, mình sẽ hướng dẫn bạn cách tạo hiệu ứng bằng thư viện animate.css. Chúng ta sẽ làm hiệu ứng cuộn đến phần nào của website thì nội dung sẽ hiện ra.
Nội dung chính
Video – Tạo hiệu ứng bằng thư viện animate.css
Ý tưởng
+ Bắt sự kiện cuộn trang, phần này bạn có thể tham khảo Bài 15: Bắt Sự Kiện Cuộn Trang Với JQuery.
+ Khi vị trí của thẻ body thỏa điều kiện nào đó (trong trường này là trùng với vị trí của phần từ), chúng ta sẽ addClass() cho phần tử. Các class được thêm vào sẽ là các class dựng sẵn trong thư viện Animate.css
Hướng dẫn
Phần HTML
Bạn có thể sử dụng lại source code của bài 15 nhé.
Phần CSS
Css vẫn như bài 15 nhé. Chỉ dùng thêm vài dòng css để ẩn các khối đi. Chúng ta sẽ xử lý hiệu ứng bằng thư viện animate.css
.hinh-2{
opacity: 0;
}
.hinh-3{
opacity: 0;
}
Phần JS
Cách sử dụng thư viện animate.css. Thay vì addClass() do chúng ta tự định đinh. Chúng ta sẽ addClass() do animate.css làm sẵn. Bao gồm 1 class hiệu ứng và 1 class animated
$(document).ready(function() {
$(window).scroll(function(event) {
var pos_body = $('html,body').scrollTop();
var pos_img2 = $('.content img:nth-child(2)').offset().top;
var pos_img3 = $('.content img:nth-child(3)').offset().top;
console.log(pos_img2);
// console.log(pos_body);
if(pos_body>20){
$('.menu').addClass('co-dinh-menu');
}
else {
$('.menu').removeClass('co-dinh-menu');
}
if(pos_body>1200){
$('.back-to-top').addClass('hien-ra');
}
else{
$('.back-to-top').removeClass('hien-ra');
}
if(pos_body>pos_img2-200){
$('.content img:nth-child(2)').addClass('fadeInLeft animated');
}
if(pos_body>pos_img3-200){
$('.content img:nth-child(3)').addClass('fadeInRight animated');
}
});
$('.back-to-top').click(function(event) {
$('html,body').animate({scrollTop: 0},1400);
});
});
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.
