Tạo hiệu ứng hoa mai rơi ngày tết cho blogspot và website

Tạo hiệu ứng hoa mai rơi ngày tết cho blogspot và website

Tạo hiệu ứng hoa mai rơi ngày tết cho blogspot và website

    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.

    Tạo hiệu ứng hoa mai rơi ngày tết cho blogspot và website

    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

    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.

    Nội dung chính