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

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

Update: có nút bật/tắt hoa mai.

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

<!-- Falling Hoa Mai Start -->
<canvas id="hoaMaiCanvas"></canvas>
<button id="toggleHoaMai">🌸 Tắt hoa mai</button>
<script>
(function(){
  const canvas = document.getElementById("hoaMaiCanvas"),
        ctx = canvas.getContext("2d"),
        toggleBtn = document.getElementById("toggleHoaMai");
  let W,H,running=true,flakes=[],numFlakes=20,img=new Image();
  function resize(){
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  window.addEventListener("resize",resize);resize();
  img.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEjChbLNaCPV-SyCPKH_F9WAZA_CgJZTt93dYgQLoAEjlAIQ6wANnI950Y8rHirYCfcL8sXm8dfr92iWdskY1UPFIBF30x0zEhgzxj45lwibWeWLBY7AgG0WjQGQm7SgH8UBDVcUvXUQ/s1600/hoamai.png";
  class Flake {
    constructor(){ this.reset(); }
    reset(){
      this.x=Math.random()*W;
      this.y=Math.random()*-H;
      this.size=15+Math.random()*10;
      this.speed=0.5+Math.random()*1.5;
      this.swing=Math.random()*2*Math.PI;
      this.swingSpeed=0.01+Math.random()*0.02;
    }
    update(){
      this.y+=this.speed;
      this.swing+=this.swingSpeed;
      this.x+=Math.sin(this.swing)*0.5;
      if(this.y>H+this.size) this.reset();
    }
    draw(){
      ctx.drawImage(img,this.x,this.y,this.size,this.size);
    }
  }
  for(let i=0;i<numFlakes;i++) flakes.push(new Flake());
  function loop(){
    if(running){
      ctx.clearRect(0,0,W,H);
      flakes.forEach(f=>{f.update();f.draw();});
    }
    requestAnimationFrame(loop);
  }
  toggleBtn.addEventListener("click",()=>{
    running=!running;
    if(running){
      toggleBtn.textContent="🌸 Tắt hoa mai";
    }else{
      ctx.clearRect(0,0,W,H);
      toggleBtn.textContent="🌼 Bật hoa mai";
    }
  });
  img.onload=loop;
  // style
  canvas.style.position="fixed";
  canvas.style.top=0;
  canvas.style.left=0;
  canvas.style.pointerEvents="none";
  canvas.style.zIndex=9997;
  toggleBtn.style.position="fixed";
  toggleBtn.style.bottom="15px";
  toggleBtn.style.left="120px"; /* tránh nút pháo hoa + scroll top */
  toggleBtn.style.zIndex=9999;
  toggleBtn.style.padding="8px 14px";
  toggleBtn.style.fontSize="14px";
  toggleBtn.style.border="none";
  toggleBtn.style.borderRadius="6px";
  toggleBtn.style.background="#ff9800";
  toggleBtn.style.color="#fff";
  toggleBtn.style.cursor="pointer";
  toggleBtn.style.boxShadow="0 2px 6px rgba(0,0,0,0.3)";
})();
</script>
<!-- Falling Hoa Mai End -->

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.