Bài 14: Hiệu ứng load từng phần tử – thư viện TweenMax

0

Trong bài này, mình sẽ hướng dẫn các bạn tạo hiệu ứng load từng phần tử bằng cách sử dụng thư viện TweenMax. Ngoài ra, bạn có thể làm bằng css với thuộc tính animation-delay.

Video – Hiệu ứng load từng phần tử – thư viện TweenMax

Ý tưởng

+ Chúng ta sẽ dùng lại  source của bài 13: hiệu ứng lightbox nhé.

+ Làm cho các hình ảnh hiển thị từ từ, cách nhau 1 khoảng thời gian.

Hướng dẫn chi tiết

+ Tải TweenMax tại trang chủ link download.

Hoặc bạn có thể dùng link cdn trực tuyến như mình. Nhớ là đặt trước link của file script.js (file js tự code)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

+ Phần html và css không có gì thay đổi, chúng ta sẽ dùng lại code đã hoàn thành của bài 13.

+ Phần js

Chúng ta sẽ dùng hàm staggerFrom trong thư viện TweenMax. Hàm này gồm các thành phần như sau

+ Phần tử được chọn cho hiệu ứng. Ở đây là các thẻ a chứa hình ảnh.

+ Thời gian chuyển động, tính bằng giây

+ Hiệu ứng chuển động

+ Thời gian cách nhau giữa 2 phần tử.

$(document).ready(function() {
   $('.content a').fancybox();
   TweenMax.staggerFrom(
      $('.content a'), // phần tử được chọn
      1, // thời gian chuyển động
      {top:100,opacity:0},
      0.4 // thời gian cách nhau giữa mỗ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ố.