27 tháng 4, 2016

Các hiệu ứng đẹp trang trí cho blogspot

Các hiệu ứng đẹp trang trí cho blogspot

Để tạo cho Blog một mang phong cách cá nhân hoặc đơn giản chỉ là trang trí blog nhân các dịp đặc biệt như: tết, giáng sinh, sinh nhật blog,... Cách đơn giản nhất là "trang hoàng" thêm các hiệu ứng tuyết rơi, sao rơi, chim bay,.. cho blog của bạn. Dưới đây là các hiệu ứng đẹp, nếu thích hiệu ứng nào thì bạn chỉ cần làm theo các hướng dẫn bên dưới nha. 

1- Đăng nhập vào Blog, 
2- Chọn Bố cục (layout)
3- Chọn Thêm tiện ích > chọn HTML/Javacript rồi dán code tương ứng của mỗi hiệu ứng mà bạn chọn vào và lưu lại là xong.

* Hiệu ứng sao vàng rơi:


Demo

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:601px;top:7px;width:auto;height:653px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitiu8LKmhWgzEj0vJyOHOfx0DmhmQRDlsa_faj6z16fRYBDtkpBVmXFPsIH1nOewMm3mkz_dFz1PYIqqTH7ZukVG1yNAYzn1wGn3j5FB5CRCJIKx1tetPUvlYnAmLFMsGuK5MBI7xUNs8/s1600/namkna.blogspot.com_star.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:720px;top:64px;width:auto;height:232px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:735px;top:50px;width:auto;height:321px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:608px;top:78px;width:auto;height:125px;z-index:1;" scrollamount="6"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:43px;top:62px;width:auto;height:10px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:539px;top:97px;width:auto;height:426px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:791px;top:45px;width:auto;height:178px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:278px;top:104px;width:auto;height:701px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:404px;top:69px;width:auto;height:211px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:331px;top:2px;width:auto;height:293px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:655px;top:89px;width:auto;height:399px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:813px;top:11px;width:auto;height:429px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:254px;top:109px;width:auto;height:146px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:616px;top:20px;width:auto;height:534px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:652px;top:42px;width:auto;height:410px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:707px;top:96px;width:auto;height:39px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:200px;top:76px;width:auto;height:137px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:309px;top:13px;width:auto;height:338px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:622px;top:107px;width:auto;height:676px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:149px;top:76px;width:auto;height:199px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:506px;top:77px;width:auto;height:344px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee>

* Hiệu ứng sao rơi xuống với nhiều màu chớp tắt:


Demo

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:601px;top:7px;width:auto;height:653px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:720px;top:64px;width:auto;height:232px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:735px;top:50px;width:auto;height:321px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:608px;top:78px;width:auto;height:125px;z-index:1;" scrollamount="6"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:43px;top:62px;width:auto;height:10px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:539px;top:97px;width:auto;height:426px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:791px;top:45px;width:auto;height:178px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:278px;top:104px;width:auto;height:701px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:404px;top:69px;width:auto;height:211px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:331px;top:2px;width:auto;height:293px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:655px;top:89px;width:auto;height:399px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:813px;top:11px;width:auto;height:429px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:254px;top:109px;width:auto;height:146px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:616px;top:20px;width:auto;height:534px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:652px;top:42px;width:auto;height:410px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:707px;top:96px;width:auto;height:39px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:200px;top:76px;width:auto;height:137px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:309px;top:13px;width:auto;height:338px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:622px;top:107px;width:auto;height:676px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:149px;top:76px;width:auto;height:199px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:506px;top:77px;width:auto;height:344px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee>

Hiệu ứng lá rơi:


Demo

<script type='text/javascript'>
// <![CDATA[

  //Configure below to change URL path to the snow image
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXaJhKgr7XGO0gfjh0-91J8jA2BHBxKd35fAZNCC99EuQt4y9pHaZLaWeF9c11eXENdMm0eFzsq_g-Hk4wHeVWzG4y1Ksb1Peo_2QKUpOR0P5I_rdbjrS-ptFmr6-Tshhf0ozOlT-tqc/s1600/FallingLeaves.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

 function iecompattest(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
  if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
  doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

 function hidesnow(){
  if (window.snowtimer) clearTimeout(snowtimer)
  for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
 }
  

if (ie4up||ns6up){
    snowIE_NS6();
  if (hidesnowtime>0)
  setTimeout("hidesnow()", hidesnowtime*1000)
  }
// ]]>
</script>

Hiệu ứng tuyết rơi:


Demo

<script type='text/javascript'>
// <![CDATA[
/*
https://sites.google.com/site/bloggertricksandtoolz/snowstormeffectbywww.bloggertricksandtoolz.com.js
   DHTML Snowstorm! OO-style Jascript-based Snow effect
   ----------------------------------------------------
   Version 1.4.20091115 (Previous rev: v1.3.20081215)
   Code by Scott Schiller - http://schillmania.com
   ----------------------------------------------------
  
   Initializes after body onload() by default (via addEventHandler() call at bottom.)
   To customize properties, edit below or override configuration after this script
   has run (but before body.onload), eg. snowStorm.snowStick = false;

*/

var snowStorm = null;

function SnowStorm() {

  // --- PROPERTIES ---

  this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.targetElement = null;      // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
  this.followMouse = true;        // Snow will change movement with the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

  // --- less-used bits ---

  this.flakeLeftOffset = 0;       // amount to subtract from edges of container
  this.flakeRightOffset = 0;      // amount to subtract from edges of container
  this.flakeWidth = 8;            // max pixel width for snow element
  this.flakeHeight = 8;           // max pixel height for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range
  this.zIndex = 0;                // CSS stacking order applied to each snowflake

  // --- End of user section ---

  // jslint global declarations
  /*global window, document, navigator, clearInterval, setInterval */

  var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
 return o.addEventListener(evtName,evtHandler,false);
  }:function(o,evtName,evtHandler) {
 return o.attachEvent('on'+evtName,evtHandler);
  });

  var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
    return o.removeEventListener(evtName,evtHandler,false);
  }:function(o,evtName,evtHandler) {
 return o.detachEvent('on'+evtName,evtHandler);
  });

  function rnd(n,min) {
    if (isNaN(min)) {
   min = 0;
 }
    return (Math.random()*n)+min;
  }

  function plusMinus(n) {
    return (parseInt(rnd(2),10)==1?n*-1:n);
  }

  var s = this;
  var storm = this;
  this.timers = [];
  this.flakes = [];
  this.disabled = false;
  this.active = false;

  var isIE = navigator.userAgent.match(/msie/i);
  var isIE6 = navigator.userAgent.match(/msie 6/i);
  var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
  var isWin9X = navigator.appVersion.match(/windows 98/i);
  var isiPhone = navigator.userAgent.match(/iphone/i);
  var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
  var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
  var screenX = null;
  var screenX2 = null;
  var screenY = null;
  var scrollY = null;
  var vRndX = null;
  var vRndY = null;
  var windOffset = 1;
  var windMultiplier = 2;
  var flakeTypes = 6;
  var fixedForEverything = false;
  var opacitySupported = (function(){
    try {
   document.createElement('div').style.opacity = '0.5';
    } catch (e) {
   return false;
    }
    return true;
  })();
  var docFrag = document.createDocumentFragment();
  if (s.flakeLeftOffset === null) {
 s.flakeLeftOffset = 0;
  }
  if (s.flakeRightOffset === null) {
 s.flakeRightOffset = 0;
  }

  this.meltFrameCount = 20;
  this.meltFrames = [];
  for (var i=0; i<this.meltFrameCount; i++) {
 this.meltFrames.push(1-(i/this.meltFrameCount));
  }

  this.randomizeWind = function() {
    vRndX = plusMinus(rnd(s.vMaxX,0.2));
    vRndY = rnd(s.vMaxY,0.2);
    if (this.flakes) {
      for (var i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
  }
      }
    }
  };

  this.scrollHandler = function() {
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
    if (isNaN(scrollY)) {
   scrollY = 0; // Netscape 6 scroll fix
 }
    if (!fixedForEverything && !s.flakeBottom && s.flakes) {
      for (var i=s.flakes.length; i--;) {
        if (s.flakes[i].active === 0) {
       s.flakes[i].stick();
  }
      }
    }
  };

  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
      screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
      screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
    }
    screenX2 = parseInt(screenX/2,10);
  };

  this.resizeHandlerAlt = function() {
    screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
    screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };

  this.freeze = function() {
    // pause animation
    if (!s.disabled) {
      s.disabled = 1;
    } else {
      return false;
    }
    for (var i=s.timers.length; i--;) {
      clearInterval(s.timers[i]);
    }
  };

  this.resume = function() {
    if (s.disabled) {
       s.disabled = 0;
    } else {
      return false;
    }
    s.timerInit();
  };

  this.toggleSnow = function() {
    if (!s.flakes.length) {
      // first run
      s.start();
    } else {
      s.active = !s.active;
      if (s.active) {
        s.show();
        s.resume();
      } else {
        s.stop();
        s.freeze();
      }
    }
  };

  this.stop = function() {
    this.freeze();
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'none';
    }
    removeEvent(window,'scroll',s.scrollHandler);
    removeEvent(window,'resize',s.resizeHandler);
    if (!isOldIE) {
      removeEvent(window,'blur',s.freeze);
      removeEvent(window,'focus',s.resume);
    }
  };

  this.show = function() {
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'block';
    }
  };

  this.SnowFlake = function(parent,type,x,y) {
    var s = this;
    var storm = parent;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type];
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);

    this.refresh = function() {
   if (isNaN(s.x) || isNaN(s.y)) {
  // safety check
  return false;
   }
      s.o.style.left = s.x+'px';
      s.o.style.top = s.y+'px';
    };

    this.stick = function() {
      if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
     s.o.style.top = storm.flakeBottom+'px';
   } else {
        s.o.style.display = 'none';
     s.o.style.top = 'auto';
        s.o.style.bottom = '0px';
     s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };

    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };

    this.move = function() {
      var vX = s.vX*windOffset;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      var yDiff = screenY+scrollY-s.y;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
     if (storm.snowStick) {
          s.stick();
     } else {
       s.recycle();
     }
      } else {
     if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
       // ~1/1000 chance of melting mid-air, with each frame
       s.melting = true;
       s.melt();
       // only incrementally melt one frame
       // s.melting = false;
     }
     if (storm.useTwinkleEffect) {
    if (!s.twinkleFrame) {
   if (Math.random()>0.9) {
        s.twinkleFrame = parseInt(Math.random()*20,10);
      }
    } else {
   s.twinkleFrame--;
   s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
    }
     }
      }
    };

    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };

    this.setVelocities = function() {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
    };

 this.setOpacity = function(o,opacity) {
   if (!opacitySupported) {
  return false;
   }
   o.style.opacity = opacity;
 };

    this.melt = function() {
   if (!storm.useMeltEffect || !s.melting) {
  s.recycle();
   } else {
  if (s.meltFrame < s.meltFrameCount) {
    s.meltFrame++;
    s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
    s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
    s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
  } else {
    s.recycle();
  }
   }
    };

    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
   s.meltFrame = 0;
   s.melting = false;
   s.setOpacity(s.o,1);
   s.o.style.padding = '0px';
   s.o.style.margin = '0px';
   s.o.style.fontSize = s.fontSize+'px';
   s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
   s.o.style.textAlign = 'center';
   s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };

    this.recycle(); // set up x/y coords etc.
    this.refresh();

  };

  this.snow = function() {
    var active = 0;
    var used = 0;
    var waiting = 0;
    var flake = null;
    for (var i=s.flakes.length; i--;) {
      if (s.flakes[i].active == 1) {
        s.flakes[i].move();
        active++;
      } else if (s.flakes[i].active === 0) {
        used++;
      } else {
        waiting++;
      }
      if (s.flakes[i].melting) {
     s.flakes[i].melt();
   }
    }
    if (active<s.flakesMaxActive) {
      flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
  };

  this.mouseMove = function(e) {
    if (!s.followMouse) {
   return true;
 }
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };

  this.createSnow = function(limit,allowInactive) {
    for (var i=0; i<limit; i++) {
      s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>s.flakesMaxActive) {
     s.flakes[s.flakes.length-1].active = -1;
   }
    }
    storm.targetElement.appendChild(docFrag);
  };

  this.timerInit = function() {
    s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
  };

  this.init = function() {
    s.randomizeWind();
    s.createSnow(s.flakesMax); // create initial batch
    addEvent(window,'resize',s.resizeHandler);
    addEvent(window,'scroll',s.scrollHandler);
    if (!isOldIE) {
      addEvent(window,'blur',s.freeze);
      addEvent(window,'focus',s.resume);
    }
    s.resizeHandler();
    s.scrollHandler();
    if (s.followMouse) {
      addEvent(document,'mousemove',s.mouseMove);
    }
    s.animationInterval = Math.max(20,s.animationInterval);
    s.timerInit();
  };

  var didInit = false;

  this.start = function(bFromOnLoad) {
 if (!didInit) {
   didInit = true;
 } else if (bFromOnLoad) {
   // already loaded and running
   return true;
 }
    if (typeof s.targetElement == 'string') {
   var targetID = s.targetElement;
      s.targetElement = document.getElementById(targetID);
      if (!s.targetElement) {
     throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
   }
    }
 if (!s.targetElement) {
   s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
 }
    if (s.targetElement != document.documentElement && s.targetElement != document.body) {
   s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
 }
    s.resizeHandler(); // get bounding box elements
    s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
    fixedForEverything = s.usePositionFixed;
    if (screenX && screenY && !s.disabled) {
      s.init();
      s.active = true;
    }
  };

  function doStart() {
   s.start(true);
  }

  if (document.addEventListener) {
    // safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
    document.addEventListener('DOMContentLoaded',doStart,false);
    window.addEventListener('load',doStart,false);
  } else {
    addEvent(window,'load',doStart);
  }

}

snowStorm = new SnowStorm();
// ]]>
</script>

Hiệu ứng chim bay theo con trỏ chuột:


Demo

<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Hiệu ứng bông tuyết rơi:


Demo

<script type='text/javascript'>
// <![CDATA[
//Configure below to change URL path to the snow image
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjthnelqidPxKfLR2FE69lxbGqbsypp2_xRQGDTr9HErZop6xeypR2kaaal-XgsdHBSvL5sJ35Psw9V5DBwtigX7uf1YZMS-qo49vwsu3s3UoU9EDkXaYyJaXcWWgV0nHGvjxrqhVtkYC8/s1600/SnowFlake.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

 function iecompattest(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
  if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
  doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

 function hidesnow(){
  if (window.snowtimer) clearTimeout(snowtimer)
  for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
 }
  

if (ie4up||ns6up){
    snowIE_NS6();
  if (hidesnowtime>0)
  setTimeout("hidesnow()", hidesnowtime*1000)
  }
// ]]>
</script>
Bạn cũng có thể góp nhiều hiệu ứng lại với nhau để tạo cho mình một Blog thật đẹp

22 tháng 4, 2016

Video bình thường,

Trong hình trên:
1. Đây là toàn bộ code HTML của Video.
2. Đây là các tùy chỉnh cho Video, bạn có thể chọn màu sắc, bỏ viền … cho Video.
Khi đã cảm thấy ưng ý với các tùy chỉnh do bạn chọn, bạn copy toàn bộ code ở mục 1. nhé.
Rồi, khi đã có code, chúng ta tiến hành chèn Video vào Blog với các chế độ dưới đây nha.
1. Video bình thường, không tự động chạy:
Code
<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/N_WP1VOlAUI&hl=en&fs=1&color1=0x234900&color2=0x4e9e00″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/N_WP1VOlAUI&hl=en&fs=1&color1=0x234900&color2=0x4e9e00″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>
2.Video ở chế độ Auto Play ( tự động chạy)
Muốn cho Video của bạn khi chèn vào Blog sẽ tự động chạy thì chú ý đoạn code ở phần 1. Trong đoạn code trên, bạn thay :
en&fs=1 bằng en&autoplay=1, như vậy, bạn đã tạo lệnh Auto Play cho code HTML trên rồi đấy, khá đơn giản phải không bạn.
Sau khi thay vào ta được code dưới đây:
Code
<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/9FNhB-hOz8w&hl=en&autoplay=1&color1=0x234900&color2=0x4e9e00″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/9FNhB-hOz8w&hl=en&autoplay=1&color1=0x234900&color2=0x4e9e00″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>
<embed allowscriptaccess="never"
src="http://www.youtube.com/v/9FNhB-hOz8w&amp;
hl=en&amp;autoplay=1;&loop=1;&rel=0; " type="application/x-shockwave-flash" height="400" width="100%">




Kết quả sau khi thay đoạn lệnh trên :
3. Chèn Video làm nhạc nền cho Blog:
Tốc đọ Load nhạc ở Youtube khá nhanh và ổn định, vì vậy sẽ rất tuyệt vời khi bạn lấy Video từ trang này làm nhạc nền cho BLog của bạn, khá đơn giản để làm được điều này, chỉ cần bạn thay chiều rộng và chiều cao của đoạn code ở mục thứ 2 ( AutoPlay)  = 1 là được ngay:
 Code
<object width=”1″ height=”1″><param name=”movie” value=”http://www.youtube.com/v/N_WP1VOlAUI&hl=en&autoplay=1&color1=0x234900&color2=0x4e9e00″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/9FNhB-hOz8w&hl=en&autoplay=1&color1=0x234900&color2=0x4e9e00″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>

17 tháng 4, 2016

Hiệu ứng tuyết rơi Noel

Để thực thiện thủ thuật này rất đơn giản, chỉ cần chèn đoạn mã code sau vào HTML của website là được.

Đầu tiên các bạn hãy vào HTML của Blogger blogspot.Hãy vào Blogger.com → Blog Title → Template → Edit HTML và thêm ngay đoạn mã sau vào dưới thẻ <head> và sau đó Lưu mẫu lại.

/** @license
 * DHTML Snowstorm! JavaScript-based snow for web pages
 * Making it snow on the internets since 2003. You're welcome.
 * -----------------------------------------------------------
 * Version 1.44.20131208 (Previous rev: 1.44.20131125)
 * Copyright (c) 2007, Scott Schiller. All rights reserved.
 * Code provided under the BSD License
 * http://schillmania.com/projects/snowstorm/license.txt
 */

/*jslint nomen: true, plusplus: true, sloppy: true, vars: true, white: true */
/*global window, document, navigator, clearInterval, setInterval */

var snowStorm = (function(window, document) {

  // --- common properties ---

  this.autoStart = true;          // Whether the snow should start automatically or not.
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk.
  this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 50;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.useGPU = true;             // Enable transform-based hardware acceleration, reduce CPU load.
  this.className = null;          // CSS class name for further customization on snow elements
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.followMouse = true;        // Snow movement can respond to the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
  this.usePixelPosition = false;  // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified.

  // --- less-used bits ---

  this.freezeOnBlur = true;       // Only snow when the window is in focus (foreground.) Saves CPU.
  this.flakeLeftOffset = 0;       // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
  this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
  this.flakeWidth = 8;            // Max pixel width reserved for snow element
  this.flakeHeight = 8;           // Max pixel height reserved for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range for snow
  this.zIndex = 0;                // CSS stacking order applied to each snowflake

  // --- "No user-serviceable parts inside" past this point, yadda yadda ---

  var storm = this,
  features,
  // UA sniffing and backCompat rendering mode checks for fixed position, etc.
  isIE = navigator.userAgent.match(/msie/i),
  isIE6 = navigator.userAgent.match(/msie 6/i),
  isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),
  isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
  noFixed = (isBackCompatIE || isIE6),
  screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null,
  windOffset = 1,
  windMultiplier = 2,
  flakeTypes = 6,
  fixedForEverything = false,
  targetElementIsRelative = false,
  opacitySupported = (function(){
    try {
      document.createElement('div').style.opacity = '0.5';
    } catch(e) {
      return false;
    }
    return true;
  }()),
  didInit = false,
  docFrag = document.createDocumentFragment();

  features = (function() {

    var getAnimationFrame;

    /**
     * hat tip: paul irish
     * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     * https://gist.github.com/838785
     */

    function timeoutShim(callback) {
      window.setTimeout(callback, 1000/(storm.animationInterval || 20));
    }

    var _animationFrame = (window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        timeoutShim);

    // apply to window, avoid "illegal invocation" errors in Chrome
    getAnimationFrame = _animationFrame ? function() {
      return _animationFrame.apply(window, arguments);
    } : null;

    var testDiv;

    testDiv = document.createElement('div');

    function has(prop) {

      // test for feature support
      var result = testDiv.style[prop];
      return (result !== undefined ? prop : null);

    }

    // note local scope.
    var localFeatures = {

      transform: {
        ie:  has('-ms-transform'),
        moz: has('MozTransform'),
        opera: has('OTransform'),
        webkit: has('webkitTransform'),
        w3: has('transform'),
        prop: null // the normalized property value
      },

      getAnimationFrame: getAnimationFrame

    };

    localFeatures.transform.prop = (
      localFeatures.transform.w3 ||
      localFeatures.transform.moz ||
      localFeatures.transform.webkit ||
      localFeatures.transform.ie ||
      localFeatures.transform.opera
    );

    testDiv = null;

    return localFeatures;

  }());

  this.timer = null;
  this.flakes = [];
  this.disabled = false;
  this.active = false;
  this.meltFrameCount = 20;
  this.meltFrames = [];

  this.setXY = function(o, x, y) {

    if (!o) {
      return false;
    }

    if (storm.usePixelPosition || targetElementIsRelative) {

      o.style.left = (x - storm.flakeWidth) + 'px';
      o.style.top = (y - storm.flakeHeight) + 'px';

    } else if (noFixed) {

      o.style.right = (100-(x/screenX*100)) + '%';
      // avoid creating vertical scrollbars
      o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

    } else {

      if (!storm.flakeBottom) {

        // if not using a fixed bottom coordinate...
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.bottom = (100-(y/screenY*100)) + '%';

      } else {

        // absolute top.
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

      }

    }

  };

  this.events = (function() {

    var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,
    evt = {
      add: (old?'attachEvent':'addEventListener'),
      remove: (old?'detachEvent':'removeEventListener')
    };

    function getArgs(oArgs) {
      var args = slice.call(oArgs), len = args.length;
      if (old) {
        args[1] = 'on' + args[1]; // prefix
        if (len > 3) {
          args.pop(); // no capture
        }
      } else if (len === 3) {
        args.push(false);
      }
      return args;
    }

    function apply(args, sType) {
      var element = args.shift(),
          method = [evt[sType]];
      if (old) {
        element[method](args[0], args[1]);
      } else {
        element[method].apply(element, args);
      }
    }

    function addEvent() {
      apply(getArgs(arguments), 'add');
    }

    function removeEvent() {
      apply(getArgs(arguments), 'remove');
    }

    return {
      add: addEvent,
      remove: removeEvent
    };

  }());

  function rnd(n,min) {
    if (isNaN(min)) {
      min = 0;
    }
    return (Math.random()*n)+min;
  }

  function plusMinus(n) {
    return (parseInt(rnd(2),10)===1?n*-1:n);
  }

  this.randomizeWind = function() {
    var i;
    vRndX = plusMinus(rnd(storm.vMaxX,0.2));
    vRndY = rnd(storm.vMaxY,0.2);
    if (this.flakes) {
      for (i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
        }
      }
    }
  };

  this.scrollHandler = function() {
    var i;
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (storm.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || (noFixed ? document.body.scrollTop : 0), 10));
    if (isNaN(scrollY)) {
      scrollY = 0; // Netscape 6 scroll fix
    }
    if (!fixedForEverything && !storm.flakeBottom && storm.flakes) {
      for (i=0; i<storm.flakes.length; i++) {
        if (storm.flakes[i].active === 0) {
          storm.flakes[i].stick();
        }
      }
    }
  };

  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth - 16 - storm.flakeRightOffset;
      screenY = (storm.flakeBottom || window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - storm.flakeRightOffset;
      screenY = storm.flakeBottom || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
    }
    docHeight = document.body.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };

  this.resizeHandlerAlt = function() {
    screenX = storm.targetElement.offsetWidth - storm.flakeRightOffset;
    screenY = storm.flakeBottom || storm.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
    docHeight = document.body.offsetHeight;
  };

  this.freeze = function() {
    // pause animation
    if (!storm.disabled) {
      storm.disabled = 1;
    } else {
      return false;
    }
    storm.timer = null;
  };

  this.resume = function() {
    if (storm.disabled) {
       storm.disabled = 0;
    } else {
      return false;
    }
    storm.timerInit();
  };

  this.toggleSnow = function() {
    if (!storm.flakes.length) {
      // first run
      storm.start();
    } else {
      storm.active = !storm.active;
      if (storm.active) {
        storm.show();
        storm.resume();
      } else {
        storm.stop();
        storm.freeze();
      }
    }
  };

  this.stop = function() {
    var i;
    this.freeze();
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'none';
    }
    storm.events.remove(window,'scroll',storm.scrollHandler);
    storm.events.remove(window,'resize',storm.resizeHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.remove(document,'focusout',storm.freeze);
        storm.events.remove(document,'focusin',storm.resume);
      } else {
        storm.events.remove(window,'blur',storm.freeze);
        storm.events.remove(window,'focus',storm.resume);
      }
    }
  };

  this.show = function() {
    var i;
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'block';
    }
  };

  this.SnowFlake = function(type,x,y) {
    var s = this;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type] || 1;
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    if (storm.className) {
      this.o.setAttribute('class', storm.className);
    }
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    if (storm.useGPU && features.transform.prop) {
      // GPU-accelerated snow.
      this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';
    }
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.cursor = 'default';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);

    this.refresh = function() {
      if (isNaN(s.x) || isNaN(s.y)) {
        // safety check
        return false;
      }
      storm.setXY(s.o, s.x, s.y);
    };

    this.stick = function() {
      if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
        s.o.style.top = storm.flakeBottom+'px';
      } else {
        s.o.style.display = 'none';
        s.o.style.bottom = '0%';
        s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };

    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };

    this.move = function() {
      var vX = s.vX*windOffset, yDiff;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      yDiff = screenY+scrollY-s.y+storm.flakeHeight;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
        if (storm.snowStick) {
          s.stick();
        } else {
          s.recycle();
        }
      } else {
        if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
          // ~1/1000 chance of melting mid-air, with each frame
          s.melting = true;
          s.melt();
          // only incrementally melt one frame
          // s.melting = false;
        }
        if (storm.useTwinkleEffect) {
          if (s.twinkleFrame < 0) {
            if (Math.random() > 0.97) {
              s.twinkleFrame = parseInt(Math.random() * 8, 10);
            }
          } else {
            s.twinkleFrame--;
            if (!opacitySupported) {
              s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
            } else {
              s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1);
            }
          }
        }
      }
    };

    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };

    this.setVelocities = function() {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
    };

    this.setOpacity = function(o,opacity) {
      if (!opacitySupported) {
        return false;
      }
      o.style.opacity = opacity;
    };

    this.melt = function() {
      if (!storm.useMeltEffect || !s.melting) {
        s.recycle();
      } else {
        if (s.meltFrame < s.meltFrameCount) {
          s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
          s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
          s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
          s.meltFrame++;
        } else {
          s.recycle();
        }
      }
    };

    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
      s.meltFrame = 0;
      s.melting = false;
      s.setOpacity(s.o,1);
      s.o.style.padding = '0px';
      s.o.style.margin = '0px';
      s.o.style.fontSize = s.fontSize+'px';
      s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
      s.o.style.textAlign = 'center';
      s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };

    this.recycle(); // set up x/y coords etc.
    this.refresh();

  };

  this.snow = function() {
    var active = 0, flake = null, i, j;
    for (i=0, j=storm.flakes.length; i<j; i++) {
      if (storm.flakes[i].active === 1) {
        storm.flakes[i].move();
        active++;
      }
      if (storm.flakes[i].melting) {
        storm.flakes[i].melt();
      }
    }
    if (active<storm.flakesMaxActive) {
      flake = storm.flakes[parseInt(rnd(storm.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
    if (storm.timer) {
      features.getAnimationFrame(storm.snow);
    }
  };

  this.mouseMove = function(e) {
    if (!storm.followMouse) {
      return true;
    }
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };

  this.createSnow = function(limit,allowInactive) {
    var i;
    for (i=0; i<limit; i++) {
      storm.flakes[storm.flakes.length] = new storm.SnowFlake(parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>storm.flakesMaxActive) {
        storm.flakes[storm.flakes.length-1].active = -1;
      }
    }
    storm.targetElement.appendChild(docFrag);
  };

  this.timerInit = function() {
    storm.timer = true;
    storm.snow();
  };

  this.init = function() {
    var i;
    for (i=0; i<storm.meltFrameCount; i++) {
      storm.meltFrames.push(1-(i/storm.meltFrameCount));
    }
    storm.randomizeWind();
    storm.createSnow(storm.flakesMax); // create initial batch
    storm.events.add(window,'resize',storm.resizeHandler);
    storm.events.add(window,'scroll',storm.scrollHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.add(document,'focusout',storm.freeze);
        storm.events.add(document,'focusin',storm.resume);
      } else {
        storm.events.add(window,'blur',storm.freeze);
        storm.events.add(window,'focus',storm.resume);
      }
    }
    storm.resizeHandler();
    storm.scrollHandler();
    if (storm.followMouse) {
      storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);
    }
    storm.animationInterval = Math.max(20,storm.animationInterval);
    storm.timerInit();
  };

  this.start = function(bFromOnLoad) {
    if (!didInit) {
      didInit = true;
    } else if (bFromOnLoad) {
      // already loaded and running
      return true;
    }
    if (typeof storm.targetElement === 'string') {
      var targetID = storm.targetElement;
      storm.targetElement = document.getElementById(targetID);
      if (!storm.targetElement) {
        throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
      }
    }
    if (!storm.targetElement) {
      storm.targetElement = (document.body || document.documentElement);
    }
    if (storm.targetElement !== document.documentElement && storm.targetElement !== document.body) {
      // re-map handler to get element instead of screen dimensions
      storm.resizeHandler = storm.resizeHandlerAlt;
      //and force-enable pixel positioning
      storm.usePixelPosition = true;
    }
    storm.resizeHandler(); // get bounding box elements
    storm.usePositionFixed = (storm.usePositionFixed && !noFixed && !storm.flakeBottom); // whether or not position:fixed is to be used
    if (window.getComputedStyle) {
      // attempt to determine if body or user-specified snow parent element is relatlively-positioned.
      try {
        targetElementIsRelative = (window.getComputedStyle(storm.targetElement, null).getPropertyValue('position') === 'relative');
      } catch(e) {
        // oh well
        targetElementIsRelative = false;
      }
    }
    fixedForEverything = storm.usePositionFixed;
    if (screenX && screenY && !storm.disabled) {
      storm.init();
      storm.active = true;
    }
  };

  function doDelayedStart() {
    window.setTimeout(function() {
      storm.start(true);
    }, 20);
    // event cleanup
    storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);
  }

  function doStart() {
    if (!storm.excludeMobile || !isMobile) {
      doDelayedStart();
    }
    // event cleanup
    storm.events.remove(window, 'load', doStart);
  }

  // hooks for starting the snow
  if (storm.autoStart) {
    storm.events.add(window, 'load', doStart, false);
  }

  return this;

}(window, document));

Thế là đã xong thủ thuật blog [Tips] - Hiệu ứng tuyết rơi Noel cho website & blogspot blogger rồi cả nhà nhé! Chúc các bạn thành công với thủ thuật quen thuộc và đơn giản này!