Code hiệu ứng lá vàng rơi cho Blogspot mùa thu đông

Hello anh em! Lại là 1 chuyên mục share code tiếp đây, chào mừng tất cả các bạn đã quay trở lại với bài viết tiếp theo của Tôi Share nhé!

Lời mở đầu

Anh em ở miền Bắc với Hà Nội mấy hôm nay ra đường buổi sáng thế nào rồi, đã lôi áo khoác gió với áo nỉ ra mặc chưa? Hôm nay là ngày mùng 2 tháng 11 rồi, vậy là chúng ta đã chính thức bước vào 2 tháng cuối cùng của năm 2026. Cách đây đúng 1 tuần hồi cuối tháng 10 mình còn ngồi lên bài than thở với anh em là mùa thu Hà Nội năm nay dị quá, nắng chang chang 35-36 độ C mà toàn bị không khí lạnh lệch đông quay xe làm đêm vẫn phải bật điều hòa. Ấy thế mà sang đầu tháng 11 cái là thời tiết lật mặt nhanh hơn người yêu cũ luôn. Đợt gió mùa đông bắc lần này tràn về không còn lệch đi đâu nữa mà thổi thẳng vào đất liền, mang theo cái không khí lạnh khô đặc trưng của đầu mùa đông làm sáng nay mình dậy đi học sớm mà bước chân ra khỏi chăn bông cứ phải gọi là cực hình.

Sáng nay thứ 2 đầu tuần mình đi học trên con đường quen thuộc từ nhà tới trường THPT Phan Đình Phùng, quãng đường có 1 cây số thôi mà gió lạnh thổi hun hút qua mấy hàng cây sấu già hai bên đường làm lá vàng rụng đầy cả vỉa hè. Vừa đi bộ vừa đút tay vào túi áo khoác nhìn lá sấu bay lả tả theo từng cơn gió mùa, tự dưng trong đầu mình nảy số ngay lập tức: "Ơ kìa, ngoài đời trời chuyển thu đông lá rơi đẹp thế này rồi, sao mình không mang luôn cái không khí gió mùa này lên trang blog của mình nhỉ?". Nghĩ là làm, tối nay đi học về ăn cơm xong là mình mở máy tính lên ngồi lục lại kho code cũ rồi tự tay viết nâng cấp lại bộ code hiệu ứng lá vàng rơi cho Blogspot mùa thu đông để share liền cho anh em trang trí web dịp 2 tháng cuối năm này.

Tại sao mấy bộ code lá rơi đời cũ trên mạng giờ gắn vào là toang?

Thú thật với anh em là cái hiệu ứng lá rơi hay tuyết rơi trên Blogspot nó có từ cái thời mình mới tập tành mò HTML, CSS hồi lớp 7 năm 2021 cơ. Nhưng mà nếu bây giờ anh em lên Google gõ tìm code lá vàng rơi rồi bê nguyên mấy đoạn script từ năm 2016-2019 gắn vào template hiện đại như Median UI, Plus UI hay Lantro UI thì mình cá luôn là trải nghiệm người dùng tụt dốc không phanh. Hồi xưa mình làm con blog đầu đời chưa có kinh nghiệm cũng từng dính chưởng này rồi nên mình hiểu rõ cái nỗi khổ đó lắm.

Cái lỗi ngớ ngẩn đầu tiên của mấy bộ code cổ lỗ sĩ đấy là nó dùng link ảnh .gif hoặc .png lưu trên mấy trang up ảnh miễn phí từ đời Tống. Qua bao nhiêu năm tháng thì mấy cái link ảnh đó chết sạch trơn rồi, kết quả là thay vì thấy lá vàng rơi thơ mộng như phố Phan Đình Phùng thì độc giả vào blog anh em lại thấy hàng chục cái icon "ảnh lỗi" rách đôi rơi lộp độp từ đỉnh màn hình xuống. Nhìn nó quê và mất thẩm mỹ kinh khủng khiếp.

Chưa hết đâu nhé, cái điểm chí mạng thứ hai nằm ở cách vận hành của Javascript đời cũ. Mấy đoạn code ngày xưa toàn chơi bài dùng hàm setInterval đẻ ra hàng trăm thẻ <div> hoặc <img> trực tiếp ngoài cây DOM rồi liên tục cập nhật thuộc tính top và left mỗi vài chục mili-giây. Anh em nào dùng máy tính cấu hình yếu hoặc lướt web bằng điện thoại tầm trung mở trang blog có gắn code đó tầm 2 phút thôi là quạt tản nhiệt kêu vù vù, máy nóng ran, vuốt cuộn trang đọc bài thì giật đùng đùng. Nặng hơn nữa là nhiều ông share code quên béng mất thuộc tính pointer-events: none; ở lớp phủ ngoài cùng. Thế là khi người đọc muốn bấm vào thanh menu, muốn bôi đen copy đoạn code hay vô tình click vào quảng cáo Google AdSense ủng hộ admin thì chuột toàn bấm trúng... chiếc lá đang bay ngang qua. Bấm 3-4 phát không ăn là người ta bực mình thoát trang luôn, vừa mất khách vừa tụt điểm SEO trải nghiệm trang trên Google PageSpeed Insights.

Điểm khác biệt "xịn sò con bò" trong bộ code lá thu đông của Tôi Share

Rút kinh nghiệm xương máu từ những lần tự vọc vạch tối ưu tốc độ tải trang cho Tôi Share, bộ code hôm nay mình đem đến cho anh em đã được mình đập đi viết lại hoàn toàn theo tiêu chuẩn web năm 2026. Mình không dùng bất kỳ 1 tấm ảnh ngoài nào cả mà vẽ trực tiếp hình chiếc lá bằng vector SVG và xử lý chuyển động trên thẻ <canvas> kết hợp hàm requestAnimationFrame. Cách này giúp trình duyệt gom toàn bộ các chiếc lá vào đúng 1 phần tử HTML duy nhất, mượt chuẩn 60FPS và tự động tạm dừng tính toán khi độc giả chuyển sang tab khác để tiết kiệm pin tối đa.

À rồi, đến phần này là đáng chú ý nhất đây này! Vì mình viết bài này đúng đợt gió mùa đông bắc đang tràn về miền Bắc nên mình đã code thêm một thuật toán mô phỏng "cơn gió mùa" (Wind Gust) cực kỳ thật. Thay vì lá cứ rơi thẳng đuột từ trên xuống dưới như cục gạch trông rất giả trân, những chiếc lá trong code của mình sẽ có độ nghiêng lắc lư, tự xoay lật mặt 3D và thỉnh thoảng sẽ có một luồng gió lạnh thổi tạt ngang làm cả đám lá bayạt sang một bên giống hệt cảnh mình nhìn thấy ngoài đường sáng nay. Đặc biệt, nếu anh em dùng máy tính di chuyển con trỏ chuột sang bên nào thì luồng gió cũng sẽ nhẹ nhàng cuốn lá nghiêng theo hướng chuột bên đó, còn trên điện thoại thì số lượng lá tự động giảm đi một nửa để không bao giờ gây rối mắt khi đọc chữ.

Cách 1: Code lá vàng rơi Canvas + Gió mùa Đông Bắc (Khuyên dùng vì siêu mượt)

Đây là phiên bản hoàn chỉnh nhất mà mình đang tâm đắc nhất. Code đã được bọc cơ chế tự khởi tạo thông minh, không làm chặn quá trình tải trang (Zero Blocking Time) và hoàn toàn vô hình với các thao tác click chuột của người dùng.

Để cài đặt, anh em vào trang quản trị Blogger → chọn mục Chủ đề (Theme) → bấm vào mũi tên cạnh nút Tùy chỉnh chọn Chỉnh sửa HTML (Edit HTML). Sau đó anh em kéo xuống cuối cùng của file, tìm thẻ đóng </body> và dán toàn bộ đoạn code bên dưới vào ngay phía trên thẻ </body> nhé (hoặc anh em nào lười vào code mẫu thì ném thẳng vào Tiện ích HTML/JavaScript ở phần Bố cục cũng chạy ngon lành):

<!-- Code Hiệu Ứng Lá Vàng Rơi Mùa Thu Đông - Bản Quyền Tôi Share (toishare.net) -->
<style>
  #toishare-autumn-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none !important;
    z-index: 99999;
    overflow: hidden;
  }
  /* Ẩn hiệu ứng khi in trang */
  @media print {
    #toishare-autumn-canvas { display: none !important; }
  }
</style>

<script>
(function() {
  // Cấu hình tùy chỉnh nhanh cho anh em
  const CONFIG_TOISHARE = {
    maxLeavesDesktop: 28,    // Số lá tối đa trên máy tính (đừng để quá 50 kẻo rối mắt)
    maxLeavesMobile: 12,     // Số lá trên điện thoại để tiết kiệm pin và mượt mà
    baseWindSpeed: 0.6,      // Tốc độ gió mùa mặc định (số dương thổi sang phải, âm sang trái)
    fallSpeedMin: 0.8,       // Tốc độ rơi chậm nhất
    fallSpeedMax: 2.1,       // Tốc độ rơi nhanh nhất
    colors: [
      '#e67e22', // Cam lá bàng thu đông
      '#f1c40f', // Vàng tươi lá sấu Hà Nội
      '#d35400', // Đỏ cam đậm cuối thu
      '#f39c12', // Vàng nghệ ấm
      '#c0392b'  // Đỏ sẫm chớm đông
    ]
  };

  // Khởi tạo Canvas không làm chậm tốc độ load web
  const canvas = document.createElement('canvas');
  canvas.id = 'toishare-autumn-canvas';
  document.body.appendChild(canvas);
  const ctx = canvas.getContext('2d');

  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;
  let isMobile = width < 768;
  let leafCount = isMobile ? CONFIG_TOISHARE.maxLeavesMobile : CONFIG_TOISHARE.maxLeavesDesktop;

  // Biến mô phỏng đợt gió mùa đông bắc thổi theo từng cơn
  let windAngle = 0;
  let mouseWindOffset = 0;

  window.addEventListener('resize', function() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    isMobile = width < 768;
  }, { passive: true });

  // Tương tác gió nhẹ khi di chuột trên máy tính
  window.addEventListener('mousemove', function(e) {
    if (!isMobile) {
      const centerX = width / 2;
      mouseWindOffset = ((e.clientX - centerX) / centerX) * 0.8;
    }
  }, { passive: true });

  // Lớp tạo từng chiếc lá với thông số vật lý ngẫu nhiên
  class AutumnLeaf {
    constructor(randomY = false) {
      this.reset(randomY);
    }

    reset(randomY = false) {
      this.x = Math.random() * width;
      this.y = randomY ? Math.random() * height : -30 - Math.random() * 50;
      this.size = isMobile ? (8 + Math.random() * 7) : (10 + Math.random() * 10);
      this.speedY = CONFIG_TOISHARE.fallSpeedMin + Math.random() * (CONFIG_TOISHARE.fallSpeedMax - CONFIG_TOISHARE.fallSpeedMin);
      this.speedX = (Math.random() - 0.5) * 1.2;
      this.color = CONFIG_TOISHARE.colors[Math.floor(Math.random() * CONFIG_TOISHARE.colors.length)];
      
      // Góc xoay và hiệu ứng lật 3D của chiếc lá trong gió lạnh
      this.rotation = Math.random() * Math.PI * 2;
      this.rotationSpeed = (Math.random() - 0.5) * 0.04;
      this.flip = Math.random() * Math.PI;
      this.flipSpeed = 0.02 + Math.random() * 0.03;
      this.swayAmplitude = 0.5 + Math.random() * 1.5;
      this.swayOffset = Math.random() * Math.PI * 2;
      this.opacity = 0.75 + Math.random() * 0.25;
    }

    update(currentGust) {
      this.swayOffset += 0.025;
      this.flip += this.flipSpeed;
      this.rotation += this.rotationSpeed;

      // Cộng hưởng giữa rơi tự do, độ đung đưa của lá và sức đẩy của gió mùa
      this.y += this.speedY;
      this.x += this.speedX + Math.sin(this.swayOffset) * this.swayAmplitude + currentGust + mouseWindOffset;

      // Nếu lá bay quá mép màn hình hoặc chạm đáy thì tái tạo lại ở phía trên
      if (this.y > height + 40) {
        this.reset(false);
      }
      if (this.x > width + 50) {
        this.x = -40;
      } else if (this.x < -50) {
        this.x = width + 40;
      }
    }

    draw() {
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.rotation);
      // Tạo hiệu ứng lật mặt lá 3D bằng hàm scale trục Y theo cosin
      ctx.scale(1, Math.cos(this.flip));
      ctx.globalAlpha = this.opacity;

      // Vẽ dáng chiếc lá thu tự nhiên kèm cuống lá và gân chính
      ctx.beginPath();
      ctx.fillStyle = this.color;
      ctx.moveTo(0, -this.size);
      ctx.bezierCurveTo(this.size * 0.9, -this.size * 0.5, this.size * 0.8, this.size * 0.6, 0, this.size);
      ctx.bezierCurveTo(-this.size * 0.8, this.size * 0.6, -this.size * 0.9, -this.size * 0.5, 0, -this.size);
      ctx.fill();

      // Vẽ gân lá mảnh ở giữa cho chân thực
      ctx.beginPath();
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';
      ctx.lineWidth = 0.8;
      ctx.moveTo(0, -this.size * 0.8);
      ctx.lineTo(0, this.size * 1.2);
      ctx.stroke();

      ctx.restore();
    }
  }

  const leavesArray = [];
  for (let i = 0; i < leafCount; i++) {
    leavesArray.push(new AutumnLeaf(true));
  }

  function animateLeaves() {
    ctx.clearRect(0, 0, width, height);
    
    // Tạo nhịp gió thổi mạnh - nhẹ tự nhiên theo chu kỳ hàm sin
    windAngle += 0.005;
    const currentGust = CONFIG_TOISHARE.baseWindSpeed + Math.sin(windAngle) * 0.9;

    for (let i = 0; i < leavesArray.length; i++) {
      leavesArray[i].update(currentGust);
      leavesArray[i].draw();
    }
    requestAnimationFrame(animateLeaves);
  }

  // Đợi trang tải xong mới bắt đầu chạy hiệu ứng để điểm Google PageSpeed luôn xanh
  if (document.readyState === 'complete') {
    animateLeaves();
  } else {
    window.addEventListener('load', animateLeaves);
  }
})();
</script>

Cách 2: Phiên bản có nút Bật/Tắt hiệu ứng (Chiều lòng cả những độc giả khó tính nhất)

Mình thì cực kỳ thích ngắm lá rơi trên web vào những tối trời lạnh ngồi nghe nhạc buồn rồi gõ blog, nhưng mình cũng hiểu tâm lý nhiều anh em làm blog chia sẻ tài liệu học tập hoặc code dài. Có những bạn độc giả vào web chỉ muốn tập trung 100% mắt để đọc chữ hoặc soi từng dòng lệnh, thấy cái gì bay bay trước mặt là họ lại thấy hơi vướng víu. Thế nên mình đã viết thêm một phiên bản nâng cao thứ 2 có tích hợp sẵn nút Bật/Tắt hiệu ứng lá rơi nhỏ gọn nằm ở góc dưới màn hình và lưu trạng thái vào localStorage của trình duyệt.

Điểm ăn tiền của phiên bản này là nếu độc giả bấm tắt hiệu ứng 1 lần, thì kể cả khi họ chuyển sang đọc bài viết khác hay ngày mai quay lại blog của anh em, trình duyệt vẫn tự nhớ lựa chọn đó và không bật lá rơi lên làm phiền họ nữa, trừ khi họ chủ động bấm bật lại. Đây chính là cách mình giữ chân độc giả ở lại trang lâu hơn mà vẫn giữ được chất riêng cho blog.

<!-- Code Lá Rơi Có Nút Bật/Tắt Lưu Trạng Thái - Tôi Share -->
<style>
  .toishare-leaf-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 100000;
    background: rgba(30, 39, 46, 0.85);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.4);
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
  }
  .toishare-leaf-toggle:hover {
    transform: translateY(-2px);
    background: rgba(30, 39, 46, 1);
  }
</style>

<button id="btnToggleLeafToiShare" class="toishare-leaf-toggle" title="Bật/Tắt hiệu ứng lá thu đông">
  🍂 <span id="txtLeafStatus">Tắt lá rơi</span>
</button>

<script>
(function() {
  const btn = document.getElementById('btnToggleLeafToiShare');
  const txt = document.getElementById('txtLeafStatus');
  const STORAGE_KEY = 'toishare_disable_autumn_leaves';

  function updateLeafVisibility() {
    const canvas = document.getElementById('toishare-autumn-canvas');
    const isDisabled = localStorage.getItem(STORAGE_KEY) === 'true';
    if (canvas) {
      canvas.style.display = isDisabled ? 'none' : 'block';
    }
    txt.textContent = isDisabled ? 'Bật lá rơi' : 'Tắt lá rơi';
    btn.style.opacity = isDisabled ? '0.65' : '1';
  }

  btn.addEventListener('click', function() {
    const currentState = localStorage.getItem(STORAGE_KEY) === 'true';
    localStorage.setItem(STORAGE_KEY, !currentState);
    updateLeafVisibility();
  });

  window.addEventListener('load', function() {
    setTimeout(updateLeafVisibility, 100);
  });
})();
</script>

Hướng dẫn anh em tự chỉnh thông số theo ý thích

Nhiều anh em mới làm quen với Blogspot nhìn đống code Javascript bên trên chắc dễ bị hoa mắt, nhưng thực ra mình đã gom hết các mục cần chỉnh lên ngay đầu đoạn code ở phần CONFIG_TOISHARE rồi. Anh em chỉ cần chú ý mấy dòng này cho mình thôi:

• Chỉnh số lượng lá (maxLeavesDesktop và maxLeavesMobile): Mình đang để mặc định là 28 lá trên máy tính và 12 lá trên điện thoại. Theo mắt thẩm mỹ của mình thì con số này là vừa đẹp, nhìn thoáng đãng như gió thu Hà Nội. Anh em nào thích kiểu bão lá rụng dày đặc trước đợt gió mùa đông bắc thì tăng lên tầm 45-50, nhưng đừng chỉnh lên tới mấy trăm lá kẻo che hết cả chữ bài viết nhé.
• Chỉnh hướng gió và sức gió (baseWindSpeed): Mặc định mình để 0.6 tức là gió thổi nhẹ từ trái sang phải. Nếu hôm nào đài báo gió mùa đông bắc về mạnh cấp 4 cấp 5 mà anh em muốn trên blog gió cũng thổi rát như ngoài trời thì tăng số này lên 1.8 hoặc 2.5.
• Đổi tông màu lá (colors): Mình đã phối sẵn 5 mã màu chuẩn sắc thu đông miền Bắc gồm vàng lá sấu, cam lá bàng và đỏ sẫm. Sắp tới sang cuối tháng 12 gần lễ Giáng Sinh và Tết Dương lịch 2027, nếu anh em muốn biến ngay bộ code này thành hiệu ứng tuyết rơi hoặc cánh hoa đào ngày Tết thì chỉ cần đổi toàn bộ mảng màu đó sang màu trắng #ffffff hoặc hồng phấn #ffb8b8 là ăn ngay, đỡ phải mất công đi tìm code mới!

Lưu ý nhỏ cho anh em: Khi dán code vào phần Chỉnh sửa HTML của Blogger, nhớ kiểm tra kỹ xem mình đã dán đúng vào trước thẻ đóng </body> chưa nhé, tuyệt đối đừng dán nhầm vào bên trong cặp thẻ <b:skin> hay <style> của template là nó báo lỗi cú pháp XML không lưu được đâu đấy!

Lời kết

Vậy là chỉ với vài phút ngồi vọc vạch, chúng ta đã khoác ngay lên cho đứa con tinh thần của mình một chiếc áo mùa thu đông cực kỳ thơ mộng và ấm cúng trong những ngày gió lạnh cuối năm rồi. Ngồi trong phòng kín nghe tiếng gió mùa rít ngoài khung cửa sổ, nhấp một ngụm nước ấm rồi nhìn những chiếc lá vàng bay lả tả trên chính trang blog do tự tay mình chăm chút nó có cái cảm giác bình yên khó tả lắm anh em ạ. Nếu trong quá trình cài đặt code vào blog mà gặp bất kỳ lỗi hiển thị nào thì anh em cứ để lại bình luận ngay phía dưới bài viết này, lúc nào đi học về rảnh tay mình sẽ vào hỗ trợ xử lý tận tình cho từng bạn nhé!

Đừng quên nhấn vào chiếc chuông màu xanh dưới góc phải màn hình để nhận thông báo mới nhất từ Tôi Share nhé.

Cảm ơn bạn đã đến đây, cảm ơn bạn đã đọc bài viết này. Nhớ theo dõi và ủng hộ Tôi Share nhé. Chúc bạn luôn mạnh khỏe, giữ ấm cơ thể để tận hưởng trọn vẹn những ngày gió mùa đông bắc cuối năm nay! (update 23:35 PM - 02/11/2026)

Copyright © Tôi Share