Tạo hiệu ứng loading giống như Windows Phone sử dụng thư viện GreenSock

GIỚI THIỆU

Việc tạo ra những hiệu ứng đẹp và bắt mắt với javascript thực sự không hề dễ dàng. Rất may mắn là chúng ta có những thư viện tuyệt vời để thực hiện điều đó, một trong các thư viện đó là GreenSock. Được biết đến với khả năng tạo hiệu ứng không thua kém gì Flash, các thư viện TimelineLite, TimelineMax, TweenLite và TweenMax nằm trong GreenSock sẽ mang lại sức sống cho website của bạn.

Với thư viện GreenSock thì chúng ta có thể tạo hiệu ứng loading như Windows Phone chỉ với 2 dòng lệnh, thật quá tuyệt vời !

HƯỚNG DẪN SỬ DỤNG

1. Thêm thư viện TweenMax

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js

2. HTML

Chúng ta sẽ tạo ra hiệu ứng với 5 hình tròn

<h1>Loading Animation Windows Phone Style</h1>
<div class="demo">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

3. CSS

Thêm một chút CSS để hiện thị đẹp hơn

body {
  background:#1d1d1d;
}

h1 {
  color: #999;
  font-family: Arial, sans-serif;
  font-weight:normal;
  text-align:center;
}
.demo {
  position:relative;
  margin:20px auto;
  width:620px;
  height:28px;
  background-color:#121212;
  border-radius:12px;
  overflow:hidden;
  border:solid 4px #121212;
}

.circle {
  width:20px;
  height:20px;
  background-color:#86cc01;
  position:absolute;
  border-radius:50%;
  display:inline-block;
  left:-20px;
  top:4px;
}

4. Gọi hàm javascript

Ở đây chúng ta sử dụng hàm staggerTo để tạo hiệu ứng

var tl = new TimelineMax();

tl.staggerTo(".circle", 1.5, {x:650, repeat:-1, repeatDelay:0.5, force3D:true, ease:SlowMo.ease.config(0.2, 0.5)}, 0.15)

DEMO

Demo dưới đây được thực hiện từ GreenSock's pen

See the Pen Toggle Play Pause by Thanh Nguyen (@genievn) on CodePen.

Recent Post