Hiệu ứng hoa mai rơi cho blogspot nhân dịp tết đến xuân về

Hiệu ứng hoa mai rơi cho blogspot nhân dịp tết đến xuân về


Năm mới sắp đến rồi, chắc hẳn những bạn làm website như mình cũng đang đi kiếm một số background hay những hiệu ứng để trang trí thêm cho Blog.
Qua tìm kiếm trên internet thì mình có tìm được hiệu ứng hoa mai rơi để làm tăng không khí tết cho Blog. Sau đây thì mình xin chia sẻ lại cho những bạn cũng đang đi tìm kiếm hiệu ứng này.


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 này mà ra thôi.

Xem thêm: Tổng hợp một số code trang trí tết cho blogspot của bạn

Thực hiện

Vào Blog => Chủ đề => 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ẻ và Lưu mẫu.
<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //the width of the snowflakes
var pictureHeight = 15; //the height of the snowflakes
var numFlakes = 10; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side
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>  

Live Preview

Tuy 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://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/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.
Khá đơn giản để có 1 hiệu ứng rơi như bạn mong muốn. Chúc các bạn có một năm mới vui tươi và hạnh phúc.

  1. :V hay nè em kiếm sakura chèn blog

    Trả lờiXóa
  2. Trả lời
    1. đúng là vấn đề js muôn thuở là lag, tuy nhiên vẫn sử dụng ok cho những blog ít js hoặc đối với những máy tính có cấu hình và mạng tốt (Chẳng hạn như máy anh :D)

      Xóa
    2. Test cái ảnh
      https://www.qoobee.com/wp-content/uploads/2018/11/EMO_062.gif

      Xóa
  3. em test thấy máy vẫn mượt,ns chung là code này đẹp

    Trả lờiXóa
    Trả lời
    1. nói chung máy tốt tốt xíu là chạy mượt thôi em.

      Xóa
    2. em đang tìm cái code trang trí 2 bên blog 2 câu đối mà chưa thấy

      Xóa
  4. Hay đó anh , đúng cái e cần trang trí cho dịp tết 😊

    Trả lờiXóa
  5. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  6. đẹp và tiện ích đấy anh

    Trả lờiXóa
  7. Thêm vào nó lag lắm anh ơi, trước em tìm thấy có một bài chỉ dùng hiệu ứng này bằng css đó

    Trả lờiXóa
    Trả lời
    1. Làm gì có css ko ông nhỏ, tào lao à.

      Xóa
    2. Xí mà anh, nó dùng ở background cho body rồi tích hợp css chuyển động

      Xóa
    3. em làm thử đi rồi nói nha.

      Xóa
    4. Đã thử và lỗi, em xin thua 😂

      Xóa
    5. haha có là tụi nó xài ầm ầm rồi em :D

      Xóa
  8. Đổi thành hình gái xinh cho nó rơi khắp màn hình cho vui mắt .cơ mà cho lk em cao cao tí đi 😁😁

    Trả lờiXóa
  9. đưa cmt lên đầu sao em quên ời ><

    Trả lờiXóa
    Trả lời
    1. hôm bữa có ai viết thủ thuật cách này mà, a cũng quên áp dụng m* rồi :D

      Xóa
  10. Đẹp ghê anh, nó kh ảnh hưởng gì tới blog cả, áp dụng ngay thôi.. ghé em nhé anh, em vừa ra bài. Mong anh ủng hộ em...

    Trả lờiXóa
    Trả lời
    1. ok liên kết e sẽ lên top lại nha :))

      Xóa
    2. Dạ, em cảm ơn anh. Chúc anh năm mới khởi đầu mọi thứ luôn suôn sẻ, an khang thinh vượng, luôn làm ăn ổn định trong cuộc sống.

      Xóa
  11. Năm mới , Nam chúc blog mạnh khỏe , làm ăn thịnh vượng , sớm đưa ra thủ thuật hay cho mọi người

    Trả lờiXóa
  12. Anh Niệm năm mới vui vẻ nha

    Trả lờiXóa
  13. Vào blog cái là thấy Tết liền :v Hoa everywhere

    Trả lờiXóa
  14. năm mới vui vẻ an khang thịnh vượng nha anh

    Trả lờiXóa

Đăng ký bản tin

Đăng ký email để không bỏ lỡ những bài viết hay