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

Anh Trai Nắng
11

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.

Trang trí tết blog: hiệu ứng hoa mai vàng rơi tùy chỉnh
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://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>

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://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/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.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

11 Nhận xét

  1. Để bật lap lên thử nào kkk

    Trả lờiXóa
  2. Trả lời
    1. chuẩn bị trước cho google nó index là vừa em ơi :v

      Xóa
  3. Share hiệu ứng pháo hoa bắn trên web a đi a 😆😆

    Trả lờiXóa
  4. Anh ơi, e tạo web bằng Google Sites, em có chèn code của a vào nhưng nó không hiện trên toàn bộ web, mà chỉ hiện ở 1 vùng nhỏ thôi, a có cách fix không ạ.
    Rất mong được sự chỉ dẫn của a, em cảm ơn a.

    Trả lờiXóa
  5. Anh ơi, e tạo web bằng Google Sites, em có mã chèn của a vào nhưng nó không hiển thị trên web toàn bộ, mà chỉ hiển thị ở 1 vùng nhỏ thôi, có cách sửa không ạ.
    Rất mong được sự hướng dẫn của a, em cảm ơn a.
    Zalo e: 0964264296
    Fb.com/TanBinh69

    Trả lờiXóa
    Trả lời
    1. cái này là code của blogger mà sao áp dụng triệt để vào google site đc em.

      Xóa
Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu