Các hiệu ứng đẹp trang trí cho blogspot
Demo
Demo
Demo
Demo
Demo
Demo
Để 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 = '•'; // • = bullet, · 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
0 Nhận sét:
Đăng nhận xét