Bài 22: Tạo hiệu ứng chuyển động với thư viện TweenMax

1

Trong bài học này, mình sẽ hướng dẫn bạn cách tạo hiệu ứng chuyển động với thư viện TweenMax. Các bạn lưu ý thư viện này nằm trong bộ thư viện js Greensock – Gsap có bản quyền và cần trả phí để sử dụng cho mục đích thương mại nhé. Thư viện này mình cũng từng hướng dẫn qua sơ lược trong Bài 14: Hiệu Ứng Load Từng Phần Tử – Thư Viện TweenMax.

Video – Tạo hiệu ứng chuyển động với thư viện TweenMax

Ý tưởng

+ Sử dụng thư viện TweenMax thay cho animation bằng css và js.

+ Tạo các hiệu ứng di chuyển, delay. Các khối chúng ta chỉ làm đơn giản để minh họa, nên chỉ cần hình vuông, có màu nền là được.

Hướng dẫn chi tiết

Phần HTML

+ Thêm các thẻ cài đặt css.

<link rel="stylesheet" type="text/css" href="css/style.css">

+ Thêm thư viện jQuery, TweenMax và script tự viết.

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

+ Các khối để minh họa hiệu ứng.

<div class="content">
   <div class="khoi-1"></div>
   <div class="khoi-1"></div>
   <div class="khoi-1"></div>
</div>
<div class="content">
   <div class="khoi-2"></div>
</div>
<div class="content">
   <div class="khoi-3"></div>
</div>
<div class="content">
   <div class="khoi-4"></div>
   <div class="khoi-4"></div>
   <div class="khoi-4"></div>
</div>
<div class="content">
   <div class="khoi-5"></div>
   <div class="khoi-5"></div>
   <div class="khoi-5"></div>
</div>

Phần CSS

.content{
   width: 1170px;
   margin: auto;
   margin-top: 50px;
   display: flex;
   justify-content: space-around;
}
.khoi-1,.khoi-2,.khoi-3,.khoi-4,.khoi-5{
   height: 50px;
   width: 50px;
   background: #c03737;
}
.khoi-2{
   background: #5c5ca9;
}
.khoi-3{
   background: #d17c34;
}
.khoi-4{background: #4a994a;}
.khoi-5{background: orange}

Phần JS

$(document).ready(function() {
   // hieu ung 1 goc la 0
   TweenMax.to($('.khoi-1'),1,{x:200,opacity:0});
   // hieu ung 2 cach 1s
   TweenMax.from($('.khoi-2'),2,{scale:2,opacity:0.5,delay:1});
   // hieu ung 3 cach 1s
   TweenMax.fromTo($('.khoi-3'),2,{y:200,opacity:0.3,delay:2},{y:-200,opacity:1});
   TweenMax.staggerTo($('.khoi-4'),1,{y:150,opacity:0},0.2);
   TweenMax.staggerFrom($('.khoi-5'),2,{y:150,opacity:0,ease: Bounce.easeOut},0.5);
});

Một số hàm được sử dụng từ thư viện TweenMax

+ Hàm TweenMax.to(phần tử được chọn,thời gian,{hiệu ứng}) dùng để xác định chuyển động. Hiệu ứng trong hàm là vị trí cuối cùng.

+ Hàm TweenMax.from(phần tử được chọn,thời gian,{hiệu ứng}) dùng để xác định chuyển động. Hiệu ứng trong hàm là vị trí ban đầu.

+ Hàm TweenMax.fromTo(phần tử được chọn,thời gian,{hiệu ứng 1},{hiệu ứng 2}) dùng để xác định chuyển động từ vị trí 1 đến vị trí 2.

+ Hàm TweenMax.staggerTo(phần tử được chọn,thời gian,{hiệu ứng}, thời gian giữa các phần tử) dùng để xác định chuyển động của chuỗi các phần tử. Các phần tử sẽ chuyển động liên tiếp nhau và cách nhau 1 khoảng thời gian. Hiệu ứng trong hàm là vị trí cuối cùng.

+ Hàm TweenMax.staggerTo(phần tử được chọn,thời gian,{hiệu ứng}, thời gian giữa các phần tử) dùng để xác định chuyển động của chuỗi các phần tử. Các phần tử sẽ chuyển động liên tiếp nhau và cách nhau 1 khoảng thời gian. Hiệu ứng trong hàm là vị trí ban đầu.

Trong bài mình có sử dụng biểu đồ chuyển động được cung cấp sẵn trên trang chủ của thư viện Gsap – TweenMax, bạn có thể xem thêm tại link này: https://greensock.com/docs

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ệ

1 bình luận
  1. […] Bài 22: Tạo hiệu ứng chuyển động với thư viện TweenMax […]

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

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