Trang Trí Tết Blog: Hiệu ứng Hoa Mai Vàng Rơi Tùy Chỉnh - Anh Trai Nắng

Trang Trí Tết Blog: hiệu ứng hoa mai vàng rơi tùy chỉnh. Code javascript hoa mai rơi cho blogspot. Mang không khí tết đến Blog của bạn.

Năm mới sắp đến rồi, chắc hẳn những bạn làm blog như mình cũng đang đi kiếm một số background hay những hiệu ứng để trang trí thêm cho Blogger.

hiệu ứng hoa mai vàng rơi tùy chỉnh cho blogspot.

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 nhé!

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. Tùy template mà áp dụng nhé!

Tạo hiệu ứng hoa mai vàng cho blogspot

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ẻ.

<script type='text/javascript'>//<![CDATA[var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEjChbLNaCPV-SyCPKH_F9WAZA_CgJZTt93dYgQLoAEjlAIQ6wANnI950Y8rHirYCfcL8sXm8dfr92iWdskY1UPFIBF30x0zEhgzxj45lwibWeWLBY7AgG0WjQGQm7SgH8UBDVcUvXUQ/s1600/hoamai.png"; //the location of the snowflakesvar pictureWidth = 15; //the width of the snowflakesvar pictureHeight = 15; //the height of the snowflakesvar numFlakes = 10; //the number of snowflakesvar 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 sideif( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }//draw the snowflakesfor( var x = 0; x < numFlakes; x++ ) {if( document.layers ) { //releave NS4 bugdocument.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 animatefunction 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 scrollingif( 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 positionfor( 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 handlersfunction getRefToDivNest(divName) {if( document.layers ) { return document.layers[divName]; } //NS4if( document[divName] ) { return document[divName]; } //NS4 alsoif( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4return false;}window.setInterval('flakeFall();',100);//]]></script>

Lưu mẫu và xem kết quả.

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 link hình ảnh này: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEjChbLNaCPV-SyCPKH_F9WAZA_CgJZTt93dYgQLoAEjlAIQ6wANnI950Y8rHirYCfcL8sXm8dfr92iWdskY1UPFIBF30x0zEhgzxj45lwibWeWLBY7AgG0WjQGQm7SgH8UBDVcUvXUQ/s1600/hoamai.png thành link ảnh bạn cần.
• 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.

Code hoa mai rơi chỉ CSS và HTML

Code này được lấy từ trang giaodien.blog, ưu điểm là chỉ dùng CSS và HTML nên không ảnh hưởng đến tốc độ load của Blog. Copy toàn bộ code dán trước thẻ đóng </body> và lưu lại là xong:

<style> /*<![CDATA[*/@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{color:yellow;position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s} /*]]>*/</style><div class="snowflakes" aria-hidden="true"> <div class="snowflake" style="font-size: 30px;">✿</div> <div class="snowflake">✿</div> <div class="snowflake" style="font-size: 40px;">✿</div> <div class="snowflake">✿</div> <div class="snowflake" style="font-size: 30px;">✿</div> <div class="snowflake" style="font-size: 22px;">✿</div> <div class="snowflake" style="font-size: 50px;">✿</div> <div class="snowflake" style="font-size: 20px;">✿</div> <div class="snowflake" style="font-size: 70px;">✿</div> <div class="snowflake" style="font-size: 20px;">✿</div></div>

Tùy chỉnh:

• ❀ (U+2740): Ký tự hoa mai đơn giản.
• ✿ (U+273F): Ký tự hoa mai với các cánh nở.
• ❁ (U+2741): Ký tự hoa mai mở rộng.
• 🏵 (U+1F3F5): Ký tự hoa mai trắng.
• 🌸 (U+1F338): Ký tự hoa mai hồng nhạt.
• 🌼 (U+1F33C): Ký tự hoa mai màu vàng.
• 🌿 (U+1F33F): Ký tự cây lá, có thể đại diện cho mùa xuân.
• 🍀 (U+1F340): Ký tự cây lúa may mắn, nhưng cũng có thể thấy là một biểu tượng của mùa xuân và sự tươi mới.
• 🌻 (U+1F33B): Ký tự hoa cúc, một biểu tượng tương tự hoa mai.
• ✾ (U+273E): Một biểu tượng trang trí giống như hoa mai.

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 hạnh phúc và tràn đầy niềm vui.