Share code jquery lá vàng rơi

reset and begin

10/15/2014

Thu sang rồi trang trí chút cho blog với hiệu ứng lá vàng rơi cho chút lạ lẫm thêm không khí mùa thu :

Cách làm khá đơn giản :

B1 : add thư viện jquery vào nếu có rồi thì thôi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

B2 add jquery là vàng vào (nên download về và lưu vào host của bạn - một ngày đẹp trời mình xóa là xong )

<script src="https://googledrive.com/host/0B5QGw-S27-uvY3p0Wm9oMXdycEU" type="text/javascript" ></script>
<script src="https://googledrive.com/host/0B5QGw-S27-uvWmtXMmRWZW9MUXM" type="text/javascript" ></script>

B3 thêm chút style cho lá vàng

<style>
.october-leaf {
position: absolute;
background-color: transparent;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOkOkMbjekLgctnhvE9rL5dslJdj-m4q82gy0Vb3cQyELSGWlqxukqrrlZeYrt2Z1yBWjtZPQQy4qq9TTWHrCm4cLStkY69cGq4v5KCxl5qm0Ml39i1kbg7jjN4rsmg1_WVOVB42kNSp2/s1600/leaves.png');
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
</style>

B1 B2 B3 : nhét hết vào giữa <head> </head>
B4 gọi script để chạy

<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: 5, // 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>

chú ý số lượng lá rơi nhiều sẽ ảnh hưởng tốc độ website cho nên dùng < 10 lá là đc