Tạo Hiệu ứng Lá Vàng Rơi Với JQuery Và CSS3
Có thể bạn quan tâm
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 !
Tags: 3d css3 jQuery jQuery pluginChuyên Mục: Javascript
Bài viết được đăng bởi webmaster
Từ khóa » Hiệu ứng Lá Rơi Cho Web
-
Hướng Dẫn Làm Hiệu ứng Hoa Rơi, Tuyết Rơi, Lá Rơi, Người Dơi - Viblo
-
Tạo Hiệu ứng Hoa Mai Rơi (tuyết Rơi, Lá Rơi,...) Cho Blogspot
-
Code Tạo Hiệu ứng Lá Rơi Cho Web - 123doc
-
Share Code Hiệu ứng Tuyết Rơi Ngẫu Nhiên Trang Trí Noel Cho Blog ...
-
Hướng Dẫn Tạo Hiệu ứng Tuyết Rơi Và Tuần Lộc Chạy Bằng Javascript
-
Chia Sẽ Code JavaScript Tạo Tuyết Rơi, Khung Cảnh Giáng Sinh Cho ...
-
Tạo Hiệu ứng Tuyết Rơi Chỉ Bằng HTML - CSS - Thủ Thuật Web
-
Top 8 Plugin Tạo Hiệu ứng Tuyết Rơi Cho WordPress - ABWEB.VN
-
[Học HTML5 CSS3] Hiệu ứng Tuyết Rơi Cho Mùa Giáng Sinh
-
Thêm Hiệu ứng Bông Tuyết, Hoa đào Rơi
-
Tạo Hiệu ứng Tuyết Rơi Nhanh Chóng Với Wordpress Super Snow
-
CSS3 Tạo Hiệu ứng Lá Thu Rơi | Cosmos Pham's Blog
-
Trang Trí Tết Blog: Hiệu ứng Hoa Mai Vàng Rơi Tùy Chỉnh - Anh Trai Nắng
-
Hiệu ứng Lá Mùa Thu Rơi Tuyệt đẹp Cho Blogger - Iris Tips