Hướng dẫn thêm hiệu ứng hoa mai rơi (tuyết rơi, lá rơi,...) tuyệt đẹp cho Blogspot

Cập nhật ngày 23/07/2024 Bởi Legend Phim

Mỗi năm tết đến xuân về, trong mỗi con người chúng ta, ai cũng có những cảm xúc riêng của mình, cảm nhận được vẻ đẹp của mùa xuân với cây cối đâm chồi nảy lộc, còn gì thú vị hơn khi bạn đem về trên Blog/Website của chính mình.

Hướng dẫn thêm hiệu ứng hoa mai rơi (tuyết rơi, lá rơi,...) tuyệt đẹp cho Blogspot

Chính vì lẻ trên, hôm nay mình hướng dẫn các bạn hiệu ứng hoa mai rơi giúp cho blog của bạn trở nên đẹp hơn trong không khí ngày Tết cổ truyền của dân tộc. Ngoài ra các hiệu ứng hoa anh đào rơi, hiệu ứng lá rơi (khi trời chuyển sang thu), hiệu ứng tuyết rơi, hiệu ứng sao rơi,…Thì cũng từ một đoạn Code mà ra thôi.

☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head> và Lưu mẫu.

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/AVvXsEh0ZOyMTn5Cbm5qEAwzwFWnXeUjlqPUBUvKwGn8_d1nfDauS35hqyHq0RLxnHuvJ_d3s4hZUlmSEX4eSJjhW5OsPBU8On8pl36p5ht1vVJeDqgkMupYAYyaEAkMpMFQwzqBwNEerdw8sTA/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.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều :)

Hướng dẫn thêm hiệu ứng hoa mai rơi (tuyết rơi, lá rơi,...) tuyệt đẹp cho Blogspot

Hướng dẫn thêm hiệu ứng hoa mai rơi (tuyết rơi, lá rơi,...) tuyệt đẹp cho Blogspot

Mỗi năm tết đến xuân về, trong mỗi con người chúng ta, ai cũng có những cảm xúc riêng của mình, cảm nhận được vẻ đẹp của mùa xuân với cây cối đâm chồi nảy lộc, còn gì thú vị hơn khi bạn đem về trên Blog/Website của chính mình.

Comments

Post a Comment

Liên quan