Hôm nay yeusharevip blogger xin share với các bác thủ thuật mới
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
B4 gọi script để chạy
Nếu có thắc mắc, hãy để lại comment phía dưới nhé, quản trị viên của yeusharevip blogger sẵn sàng trợ giúp bạn
chúc các bác thành công!!
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>B3 thêm chút style cho lá vàng
<script src="https://googledrive.com/host/0B5QGw-S27-uvWmtXMmRWZW9MUXM" type="text/javascript" ></script>
<style>B1 B2 B3 : nhét hết vào giữa <head> </head>
.october-leaf {
position: absolute;
background-color: transparent;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_lV1_IJLC_8v80jEd7X-AiryiD1b0a0htfLyK_6VaGAhJIab7vm8pZRyMfOh_j6AH4ZVz9qNz78Ey7BV5qDLI5sJ00jiEpGmnnXZsb7IEvvQMwn2U4Q-RcjPS4__EDU4-E8OS7XHbCiY/s1600/leaves.png');
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
</style>
B4 gọi script để chạy
<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
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>
Nếu có thắc mắc, hãy để lại comment phía dưới nhé, quản trị viên của yeusharevip blogger sẵn sàng trợ giúp bạn
chúc các bác thành công!!
Tags:
thu-thuat-jquery
