Hiệu ứng tuyết rơi bằng CSS + JavaScript: Nhẹ, đẹp, chạy mượt

Bài này tập trung vào cách làm đơn giản, dễ áp dụng và đặc biệt là chạy ổn trên cả desktop lẫn mobile.

Tư duy khi làm hiệu ứng tuyết rơi

Thay vì nghĩ theo hướng đồ họa phức tạp, hãy coi mỗi bông tuyết chỉ là một phần tử HTML:

• Xuất hiện ngẫu nhiên ở phía trên màn hình
• Rơi xuống với tốc độ khác nhau
• Tự biến mất khi hoàn thành animation

CSS lo phần chuyển động, JavaScript chỉ đóng vai trò tạo và dọn dẹp. Nhẹ nhàng, rõ trách nhiệm.

HTML: Chỉ cần một container

<div id="snow-container"></div>

Container này phủ toàn màn hình và không ảnh hưởng tới thao tác người dùng.

CSS: Tạo cảm giác tuyết rơi tự nhiên

#snow-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.snowflake {
  position: absolute;
  top: -12px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.7;
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes snow-fall {
  to {
    transform: translateY(120vh);
  }
}

Animation chỉ dùng transform, tránh can thiệp layout và giúp trình duyệt tối ưu bằng GPU.

JavaScript: Sinh tuyết theo thời gian thực

const snowContainer = document.getElementById('snow-container');

function spawnSnow() {
  const snow = document.createElement('div');
  snow.className = 'snowflake';

  const size = Math.random() * 5 + 3;
  const startX = Math.random() * window.innerWidth;
  const duration = Math.random() * 6 + 4;

  snow.style.width = size + 'px';
  snow.style.height = size + 'px';
  snow.style.left = startX + 'px';
  snow.style.animationDuration = duration + 's';

  snowContainer.appendChild(snow);

  snow.addEventListener('animationend', () => {
    snow.remove();
  });
}

const snowTimer = setInterval(spawnSnow, 250);

Mỗi bông tuyết có kích thước và tốc độ khác nhau, tạo cảm giác rơi ngẫu nhiên thay vì đồng loạt giả tạo.

Làm tuyết rơi “có chiều sâu” hơn

Để hiệu ứng trông thật hơn, có thể thêm một vài chi tiết nhỏ:

• Bông to rơi nhanh, bông nhỏ rơi chậm
• Thêm xoay nhẹ khi rơi
• Giảm opacity cho tuyết ở xa

Ví dụ thêm xoay:

@keyframes snow-fall {
  to {
    transform: translateY(120vh) rotate(360deg);
  }
}

Kiểm soát hiệu năng trên thiết bị yếu

Hiệu ứng đẹp nhưng không nên vô tội vạ. Một vài nguyên tắc thực tế:

• Mobile: giảm tần suất tạo tuyết
• Tab ẩn: tạm dừng animation
• Trang nội dung dài: không nên bật

Ví dụ tạm dừng khi người dùng chuyển tab:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    clearInterval(snowTimer);
  }
});

Nên dùng hiệu ứng tuyết rơi trong trường hợp nào

• Landing page theo mùa lễ
• Trang khuyến mãi ngắn hạn
• Website cá nhân mang tính trang trí

Đây là hiệu ứng mang cảm xúc. Dùng đúng lúc thì tạo không khí, dùng sai lúc thì thành rối mắt.

Tổng kết

Hiệu ứng tuyết rơi bằng CSS và JavaScript là lựa chọn gọn gàng cho website hiện đại: dễ viết, dễ chỉnh, không phụ thuộc thư viện và kiểm soát tốt hiệu năng. Nếu mục tiêu là trang nhẹ, mượt và vẫn có điểm nhấn mùa vụ, đây là cách làm rất đáng dùng.

Code ít, hiệu quả rõ, không màu mè.