Cách tạo hiệu ứng động cho các ảnh thumbnails trong một grid

Animate làm cho các hình ảnh trở nên sống động và ưa nhìn hơn. Hôm nay, Netmoon.vn sẽ chỉ cho bạn các bước để sử dụng jQuery .delay(), jQuery easing plugin, và CSS3 transforms tạo hiệu ứng động cho các ảnh thumbnails trong một grid qua bài viết sau, cùng tham khảo nhé!

Demo - Download

Bằng cách click vào nút Animate, các bạn sẽ thấy ngay một hiệu ứng ảnh cực cool theo hiệu ứng 3D. Và sau đây là từng phần tạo nên hiệu ứng này :

HTML

Chúng ta chỉ cần những phần tử html như bên dưới để tạo hiệu ứng , đồng thời chèn khai báo thư viện jQuery và plugin jquery.easing.min.js.

1
2
3
4
5
6
7

<div class="grid"></div>
<span class="animate">Animate</span>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="jquery.easing.min.js" type="text/javascript"></script>

CSS

Kế tiếp là chúng ta sẽ tiến hành định dạng một vài câu lệnh CSS cho hiệu ứng :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19

/*Montserrat font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
body {text-align: center; overflow: hidden;}

.grid {
width: 600px; height: 300px; margin: 100px auto 50px auto;
perspective: 500px; /*For 3d*/
}
.grid img {width: 60px; height: 60px; display: block; float: left;}

.animate {
font: 12px Montserrat; text-transform: uppercase;
background: rgb(0, 100, 0); color: white;
padding: 10px 20px; border-radius: 5px;
cursor: pointer;
}
.animate:hover {background: rgb(0, 75, 0);}

jQuery

Và đây chính là trái tim của hiệu ứng mà mình muốn giới thiệu cho các bạn, mỗi một câu lệnh đều có chú thích rõ ràng :

Nguồn: Thuthuatweb.net / Hongvt