Hướng dẫn bootstrap timeline animation - hoạt ảnh dòng thời gian bootstrap

Trong bài học này, mình sẽ hướng dẫn các bạn tạo hiệu ứng chuyển động nối tiếp nhau bằng thư viện TimelineMax. Thư viện này nằm trong bộ thư viện js Gsap – Greensock tương tự như TweenMax trong bài học trước – Bài 22: Tạo Hiệu Ứng Chuyển Động Với Thư Viện TweenMax.Bài 22: Tạo Hiệu Ứng Chuyển Động Với Thư Viện TweenMax.

• Video – Tạo animation nối tiếp nhau bằng thư viện TimelineMax
• Ý tưởng
• Hướng dẫn chi tiết
  • Phần HTML
  • Phần CSS
  • Phần JS
  • Các hàm được sử dụng từ thư viện TimelineMax

Video – Tạo animation nối tiếp nhau bằng thư viện TimelineMax

Ý tưởng

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

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 mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Hướng dẫn chi tiết

Phần HTML

Phần CSS

Hướng dẫn chi tiết

Phần HTML

"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 CSS

Phần JS

   

      

         

            Chạy ngay đi
            Dừng lại
            Quay lại từ đầu
         
      
   
   

      

         

      
   

Phần CSS

.khoi{
   height: 100px;
   width: 100px;
   background: #5f5c5c;
}

Phần JS

$(document).ready(function() {
   timeline = new TimelineMax();
   timeline.to($('.khoi'),1,{x:300})
   .to($('.khoi'),1,{y:300})
   .to($('.khoi'),2,{x:-300},"+=1");
   // dừng hiệu ứng
   $('#stop').click(function(event) {
      timeline.stop();
   });
   // tiếp tục hiệu ứng
   $('#play').click(function(event) {
      timeline.play();
   });
   // đi ngược lại
   $('#re-play').click(function(event) {
      timeline.reverse();
   });
});

Các hàm được sử dụng từ thư viện TimelineMax

+ Tạo chuyển động nối tiếp nhau bằng thư viện TimelineMax. Bạn có thể tải hoặc dùng link CDN trên trang chủ Gsap. Còn không cứ copy đoạn code hướng dẫn bên dưới. Xem tại link này: https://greensock.com/docsnew TimelineMax(), để sử dụng TimelineMax, các bạn cần khởi tạo bằng hàm dựng này.

+ Thư viện này tương tự TweenMax nhưng lại hỗ trợ liên kết các hiệu ứng đơn lẻ thành một chuỗi chuyển động.to(phần tử được chọn,thời gian,{hiệu ứng},”khoảng cách 2 chuyển động”) dùng để xác định chuyển động. Hiệu ứng trong hàm là vị trí cuối cùng. Có thể viết nối tiếp các hàm to để tạo thành chuỗi chuyển động. Nếu dùng TweenMax, các bạn dùng thuộc tính delay trong phần hiệu ứng để định thời gian chuyển động. Trong TimelineMax, các bạn định thời gian bằng cách thêm 1 thuộc tính phía sau hiệu ứng như cú pháp bên trên.

+ Sử dụng Bootstrap để căn chỉnh nhanh, các bạn có thể thêm Bootstrap hoặc căn chỉnh bằng CSS tự viết cũng được.stop(): dừng chuyển động.

Thêm các css và jsplay(): chạy hiệu ứng.

Khối chuyển động và các nút điều khiển chuyển động.reverse(): đảo ngược hiệu ứng.

+ Hàm khởi tạo new TimelineMax(), để sử dụng TimelineMax, các bạn cần khởi tạo bằng hàm dựng này.Download

+ Hàm to(phần tử được chọn,thời gian,{hiệu ứng},”khoảng cách 2 chuyển động”) dùng để xác định chuyển động. Hiệu ứng trong hàm là vị trí cuối cùng. Có thể viết nối tiếp các hàm to để tạo thành chuỗi chuyển động. Nếu dùng TweenMax, các bạn dùng thuộc tính delay trong phần hiệu ứng để định thời gian chuyển động. Trong TimelineMax, các bạn định thời gian bằng cách thêm 1 thuộc tính phía sau hiệu ứng như cú pháp bên trên.comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

+ Hàm stop(): dừng chuyển động.