Bài viết này chia sẻ đến bạn cách thêm hiệu ứng tuyết rơi cho website WordPress mà không cần dùng plugin. Đây là một trong các hiệu ứng được liệt kê trong bài viết Trang trí website dịp Giáng Sinh, bạn nào quan tâm thì tham khảo thêm nhé !
Hiệu ứng tuyết rơi của Hocban.vn đã được tinh chỉnh sao cho trông thật nhất có thể, bông tuyết kích thước vừa phải, số lượng tuyết không quá nhiều, cũng không làm nặng hay giật lag website. Để thực hiện thì bạn copy đoạn code bên dưới rồi dán vào bên phía dưới cùng trong file functions.php của theme/ child theme đang dùng. Xài xong hết mùa Noel thì lại xoá đi nếu không cần nữa ^^
//TUYẾT RƠI MÙA GIÁNG SINH CỦA HOCBAN.VN
add_action( 'wp_footer', 'hocban_canvas_snow_effect', 100 );
function hocban_canvas_snow_effect() : void {
?>
<canvas id="hocban-snow-canvas" aria-hidden="true"></canvas>
<script>
(() => {
const canvas = document.getElementById('hocban-snow-canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;
const flakes = [];
const count = window.innerWidth < 768 ? 20 : 50;
const resize = () => {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
};
window.addEventListener('resize', resize);
for (let i = 0; i < count; i++) {
flakes.push({
x: Math.random() * w,
y: Math.random() * h,
r: Math.random() * 2.5 + 1,
d: Math.random() + 0.5,
vy: (Math.random() * 0.4 + 0.2) * 1.5,
vx: (Math.random() * 0.6 - 0.3) * 1.5
});
}
const draw = () => {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.shadowBlur = 10;
ctx.shadowColor = '#fff';
flakes.forEach(f => {
f.y += f.vy * f.d;
f.x += f.vx;
ctx.beginPath();
ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
ctx.fill();
if (f.y > h) f.y = -10;
if (f.x > w) f.x = 0;
if (f.x < 0) f.x = w;
});
requestAnimationFrame(draw);
};
draw();
})();
</script>
<style>
#hocban-snow-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:999999}
@media (max-width:782px){#hocban-snow-canvas{display:none}}
</style>
<?php
}Ngoài ra, nếu bạn muốn dùng plugin thì có Christmas Snow 3D plugin này tạo hiệu ứng tuyết rơi cũng rất mướt, bạn có thể test thử xem có ưng ý hông nhen ^^
