Tạo hiệu ứng lá vàng rơi với jQuery và CSS3

Hôm nay mình xin giới thiệu cho các bạn một plugin rất thú vị của jQuery, với plugin này các bạn có thể tạo các hiệu ứng 3D cũng như tạo hiệu ứng lá rơi. Với plugin này, các bạn có thể thiết kế các template cho mùa thu và mùa đông.

Xem Demo | Download

Cách sử dụng :
1  Đầu tiên chúng ta sẽ chèn thư viện jQuery và Plugin vào web (có thể đặt ở bên trong thẻ head hoặc bên trên </body> )

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="3d-falling-leaves.js" type="text/javascript"></script>

2 Để tạo hiệu ứng 3D flip hoặc 3D rotation, chúng ta cần chèn thêm plugin sau :

<script src="rotate3Di.js" type="text/javascript"></script>

3 Sau đó, chúng ta cần thêm đoạn CSS sau cho những chiếc lá rơi.

.october-leaf {
position: absolute;
background-color: transparent;
background-image: url('leaves.png');
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}

4 Việc cuối cùng là gọi plugin này với những lựa chọn như sau :

<script>
jQuery(document).octoberLeaves({
leafStyles: 3,      // Number of leaf styles in the sprite (leaves.png)
speedC: 2,  // Speed of leaves
rotation: 1,// Define rotation of leaves
rotationTrue: 1,    // Whether leaves rotate (1) or not (0)
numberOfLeaves: 15, // Number of leaves
size: 40,   // General size of leaves, final size is calculated randomly (with this number as general parameter)
cycleSpeed: 30      // Animation speed (Inverse frames per second) (10-100)
})
</script>

5 Plugin này cũng cung cấp cho chúng ta 2 phương thức để điều khiển hiệu ứng.

<a href="javascript:;" onclick="$(document).octoberLeaves('start')">Start</a>
<a href="javascript:;" onclick="$(document).octoberLeaves('stop')">Stop</a>

Có lẽ với nhiều người thì hiệu ứng này cũng không có gì đặc biệt khi mà chúng ta ít phải sử dụng chúng. Tuy nhiên, mình mong là qua plugin này, các bạn có thể tùy chỉnh cho phù hợp với nhu cầu và mục đích trong các thiết kế web của mình.

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster