Trang trí tết blog: hiệu ứng hoa mai vàng rơi tùy chỉnh

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

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.