Thủ thuật tạo hiệu ứng hoa mai rơi trên nền blog

Thủ thuật tạo hiệu ứng hoa mai rơi trên nền blog

Muốn áp dụng thủ thuật, ta thực hiện như sau:

1/ Đăng nhập blog - Nhấp "Thiết kế". Giao diện thiết kế blog hiện ra, cũng chính là giao diện của "Chủ đề" bên dưới "Bố cục".

2/ Nhấp "Sao lưu / Khôi phục" phía trên bên phải giao diện màn hình để sao lưu chủ đề. Cách sao lưu chủ đề xem cụ thể TẠI ĐÂY

3/ Sau khi đã sao lưu chủ đề rồi, tiếp tục nhấp vào "Chỉnh sửa HTML" trong khung bên phải giao diện màn hình.

4/ Tìm thẻ thẻ </head> hoặc thẻ </body>

Cách tìm nhanh một thẻ trong HTML của blog xem cụ thể TẠI ĐÂY

Copy code dưới đây rồi dán bên trên thẻ </head> hoặc thẻ </body>.

5/ Nhấp "Lưu chủ đề" (nút màu đỏ nằm ở bên trên khung HTML)

6/ Nhấp "Xem Blog" để kiểm tra kết quả.

Code: dán trên thẻ </head> hoặc </body>

<script type='text/javascript'>//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtX-7lsxESAPZINQUjrKbONLvzgG2piQkwQfubGcRHHxh6MQbyOW53r4EWyExkALuf_wiJS-xQ_LWT0puUNAbSTJLZAY1uZ_jKZjIkHLjxS722D0e9TcLx5J7EKKw8UNvKW1oiaS6P2ds/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //chiều rộng của ảnh
var pictureHeight = 15; //chiều cao của ảnh
var numFlakes = 10; //số ảnh xuất hiện cùng một lúc
var downSpeed = 0.01; //tốc độ rơi của ảnh
var lrFlakes = 10; //tốc độ dao động của ảnh

if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }

//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}

//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}

//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}

//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}

window.setInterval('flakeFall();',100);
//]]>
</script>  

Tùy chỉnh.

·        Bạn muốn hoa anh đào rơi hay lá rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi hình ảnh này https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtX-7lsxESAPZINQUjrKbONLvzgG2piQkwQfubGcRHHxh6MQbyOW53r4EWyExkALuf_wiJS-xQ_LWT0puUNAbSTJLZAY1uZ_jKZjIkHLjxS722D0e9TcLx5J7EKKw8UNvKW1oiaS6P2ds/s1600/hoamai.png là xong.

·        15 Chiều rộng của bông.

·        15 Chiều cao của bông.

·        10 Số bông hoa xuất hiện cùng một lúc.

·        0,01 Tốc độ rơi của các bông hoa.

·        10 Tốc độ các bông hoa giao động từ bên trái sang bên phải và ngược lại.

nguồn:
https://www.windows2it.com/2016/02/tao-hieu-ung-hoa-mai-roi-tuyet-roi-la-roi-cho-blogspot.html