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.

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

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

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.

Liên hệ