Mỗi dịp Giáng sinh về, các Website đều thay đổi giao diện để hưởng ứng không khí lễ hội. Một trong những điểm nhấn đơn giản nhưng hiệu quả nhất chính là hiệu ứng tuyết rơi (Snowfall Effect).
Tuy nhiên, nhiều script tuyết rơi cũ thường sử dụng thư viện jQuery nặng nề hoặc Canvas phức tạp khiến website bị chậm, lag trên điện thoại. Trong bài viết này, mình sẽ chia sẻ đoạn code tuyết rơi sử dụng CSS3 Animation và Vanilla JavaScript (JS thuần). Đảm bảo 3 tiêu chí: Siêu nhẹ – Không gây lag – Dễ cài đặt.
Ưu điểm code tuyết rơi cho Website đón Giáng Sinh
- Tối ưu hiệu suất: Sử dụng
CSS Keyframesđể tạo chuyển động thay vì tính toán vị trí liên tục bằng JS, giúp giảm tải cho CPU. - Không chặn tương tác: Đã được xử lý thuộc tính
pointer-events: none, giúp người dùng vẫn click được vào các link/nút bấm bên dưới lớp tuyết mà không bị vướng. - Tùy biến cao: Dễ dàng chỉnh số lượng tuyết, tốc độ rơi và hình dáng bông tuyết.
Full Code hiệu ứng tuyết rơi (HTML/CSS/JS)
Dưới đây là đoạn mã đầy đủ. Bạn không cần tải file rườm rà, chỉ cần copy và dán.
<style>
.snowflake {
position: fixed;
top: -10px;
z-index: 9999;
user-select: none;
cursor: default;
animation-name: fall;
animation-timing-function: linear;
animation-iteration-count: infinite;
color: #F527E4; /* Màu tuyết nếu dùng ký tự */
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
</style>
<script>
(function() {
var snowflakes = [],
browserWidth, browserHeight,
numberOfSnowflakes = 50, // Số lượng bông tuyết
resetPosition = false;
function setup() {
window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
window.addEventListener("resize", setResetFlag, false);
}
function setResetFlag(e) {
resetPosition = true;
}
function generateSnowflakes() {
var originalSnowflake = document.createElement("div");
originalSnowflake.classList.add("snowflake");
originalSnowflake.innerHTML = "❄";
originalSnowflake.style.fontSize = "20px"; // Kích thước cơ bản
var snowflakeContainer = document.body;
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
for (var i = 0; i < numberOfSnowflakes; i++) {
var snowflakeClone = originalSnowflake.cloneNode(true);
snowflakeContainer.appendChild(snowflakeClone);
var initialX = Math.floor(Math.random() * browserWidth);
var fallDuration = Math.floor(Math.random() * 10) + 5 + "s";
var snowflakeSize = Math.floor(Math.random() * 20) + 10 + "px"; // Random kích thước
var delay = Math.floor(Math.random() * 5) + "s";
snowflakeClone.style.left = initialX + "px";
snowflakeClone.style.animationDuration = fallDuration;
snowflakeClone.style.fontSize = snowflakeSize;
snowflakeClone.style.animationDelay = delay;
snowflakeClone.style.opacity = Math.random(); // Độ mờ ngẫu nhiên
}
}
setup();
})();
</script>
Để đổi màu tuyết bạn thay đổi mã màu ở dòng color: #F527E4;
Full Code hiệu ứng tuyết rơi có động tuyết ở chân trang
Đây là phiên bản nâng cao sử dụng HTML5 Canvas. Hiệu ứng này sẽ cho phép tuyết rơi và đọng lại dưới chân trang web. Theo thời gian, lớp tuyết sẽ dày lên và có thể che phủ màn hình giống như một trận bão tuyết thực sự.
Hiệu ứng tuyết tích tụ sẽ che khuất nội dung website của bạn từ dưới lên trên. Hãy cân nhắc kỹ trước khi sử dụng cho trang bán hàng vì khách có thể không nhìn thấy nút “Mua ngay” hoặc Footer. Bạn có thể chỉnh biến
maxSnowHeighttrong code để giới hạn độ cao của tuyết (ví dụ chỉ cho cao 100px rồi dừng).
Giải thích các thông số trong code để bạn tùy chỉnh:
maxSnowHeight = height;: Tuyết sẽ dâng lên mãi cho đến khi lấp đầy màn hình (full screen). Nếu bạn chỉ muốn nó dâng lên một chút rồi dừng (để không che web), hãy đổi thành số pixel cụ thể, ví dụ:maxSnowHeight = 150;.snowflakeCount = 200;: Số lượng hạt tuyết đang rơi. Tăng lên thì dày hơn nhưng máy yếu có thể lag.snowPile: Đây là mảng kỹ thuật để lưu “bản đồ địa hình” của lớp tuyết dưới đáy.
<canvas id="snowCanvas" style="position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;"></canvas>
<script>
(function() {
var canvas = document.getElementById('snowCanvas');
if (!canvas) { console.error("Không tìm thấy thẻ canvas"); return; }
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
// --- CẤU HÌNH ---
var maxSnowHeight = 200; // Độ cao tối đa tuyết đọng (pixel)
var snowflakeCount = 200; // Số lượng hạt tuyết
var snowColor = "#ADD8E6"; // Màu tuyết (Xanh nhạt để dễ test, muốn trắng sửa thành #FFFFFF)
// ----------------
canvas.width = width;
canvas.height = height;
var snowflakes = [];
var snowPile = new Array(width).fill(0);
// Hàm tạo lại hạt tuyết khi rơi xuống hoặc mới bắt đầu
function resetSnowflake(flake) {
flake.x = Math.floor(Math.random() * width);
flake.y = Math.floor(Math.random() * -height);
flake.size = Math.random() * 3 + 2;
flake.speed = (Math.random() * 1) + 1.5; // Tốc độ rơi
flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.3;
}
// Khởi tạo các hạt tuyết
function init() {
snowflakes = [];
for (var i = 0; i < snowflakeCount; i++) {
var flake = {};
resetSnowflake(flake);
snowflakes.push(flake);
}
// GỌI HÀM UPDATE ĐỂ BẮT ĐẦU CHẠY
update();
}
// Vòng lặp chuyển động
function update() {
ctx.clearRect(0, 0, width, height);
// 1. Vẽ đống tuyết tích tụ dưới đáy
ctx.fillStyle = snowColor;
ctx.beginPath();
ctx.moveTo(0, height);
for (var x = 0; x < width; x++) {
ctx.lineTo(x, height - snowPile[x]);
}
ctx.lineTo(width, height);
ctx.fill();
// 2. Vẽ và cập nhật bông tuyết đang rơi
for (var i = 0; i < snowflakes.length; i++) {
var f = snowflakes[i];
f.x += Math.sin(f.y * 0.05) * 0.5; // Lắc lư nhẹ
f.y += f.velY;
var currentX = Math.floor(f.x);
if (currentX < 0) currentX = 0;
if (currentX >= width) currentX = width - 1;
// Kiểm tra va chạm với đống tuyết
var pileHeight = snowPile[currentX];
if (f.y >= height - pileHeight) {
// Tích tụ tuyết nếu chưa vượt quá giới hạn
if (pileHeight < maxSnowHeight) {
var range = 3;
for(var k = -range; k <= range; k++) {
var neighborX = currentX + k;
if(neighborX >=0 && neighborX < width) {
snowPile[neighborX] += f.size * 0.3;
}
}
}
resetSnowflake(f); // Tạo lại hạt mới từ trên cao
}
// Vẽ bông tuyết đơn lẻ
ctx.fillStyle = snowColor;
ctx.globalAlpha = f.opacity; // Độ trong suốt
ctx.beginPath();
ctx.arc(f.x, f.y, f.size, 0, Math.PI * 2);
ctx.fill();
ctx.globalAlpha = 1; // Reset lại alpha
}
requestAnimationFrame(update);
}
// Xử lý khi resize màn hình
window.addEventListener('resize', function() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
snowPile = new Array(width).fill(0); // Reset tuyết đọng khi resize để tránh lỗi hiển thị
});
init();
})();
</script>
Hướng dẫn thêm Code tuyết rơi Website Code tay (HTML/PHP)
Đối với các website tự code hoặc các mã nguồn mở khác (Laravel, CodeIgniter…), bạn thực hiện như sau:
- Mở file footer của giao diện (thường là
footer.php,footer.htmlhoặc file layout chính). - Tìm đến thẻ đóng
</body>. - Dán đoạn code ở mục 2 vào ngay phía trên thẻ
</body>. - Lưu file và tải lại trang (Ctrl + F5) để xem kết quả.
4. Hướng dẫn cài đặt cho WordPress
Với WordPress, có 2 cách để chèn code này mà không cần cài plugin nặng nề tạo hiệu ứng:
Cách 1: Sử dụng Plugin chèn Header & Footer (Khuyên dùng)
Cách này an toàn nhất, khi đổi giao diện (theme) code vẫn hoạt động.
- Cài đặt plugin WPCode (trước đây là Insert Headers and Footers) hoặc Header Footer Code Manager.
- Vào menu plugin, chọn Add New Snippet.
- Chọn vị trí chèn là Footer.
- Dán đoạn code trên vào và bấm Save/Activate.
Cách 2: Chèn trực tiếp vào Theme (Dành cho Dev)
- Vào trang quản trị WP -> Giao diện (Appearance) -> Chỉnh sửa giao diện (Theme File Editor).
- Tìm file
footer.phpở cột bên phải. - Dán code vào trước thẻ đóng
</body>. - Bấm Cập nhật tệp tin.
Lưu ý: Với cách 2, nếu bạn update theme thì code sẽ mất, nên sử dụng Child Theme để tránh tình trạng này.
Chỉ với vài dòng code đơn giản, website của bạn đã trở nên sinh động hơn rất nhiều trong mắt khách truy cập. Đây là một mẹo nhỏ trong UI/UX giúp giữ chân người dùng lâu hơn trong dịp lễ hội.
Chúc các bạn thực hiện thành công và có một mùa Giáng sinh an lành! Nếu có thắc mắc gì, hãy để lại bình luận bên dưới nhé.
