Để thêm hiệu ứng bông tuyết rơi chúng ta gắn vào theme child của website nhé:
- Trong bảng điều khiển WordPress, Bạn click vào Giao diện > Trình chỉnh sửa tệp chủ đề và sao chép đoạn mã phía dưới và dán vào file
functions.php - Bạn phải tạo một chủ đề con trước khi thực hiện bất kỳ thay đổi nào đối với tệp tin
functions.php. Nếu không, những thay đổi được áp dụng sẽ bị mất sau mỗi lần cập nhật theme.
Mẫu số 1 như ảnh trên.
/**
* Thêm hiệu ứng tuyết rơi Giáng sinh (Canvas/JS) vào chân trang.
* Dùng action wp_footer để chèn code HTML/CSS/JS.
*/
function my_christmas_snow_effect() {
// Bắt đầu khối HTML/CSS/JS (thoát khỏi PHP)
?><style>
/* Vùng chứa tuyết: Cố định, phủ toàn màn hình, không chặn click */
#snow-container-dom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9997;
overflow: hidden;
}
.dom-snowflake {
position: absolute;
/* Màu Xanh Băng */
color: #aaffff;
/* Không bóng đổ */
user-select: none;
opacity: 0.8;
}
</style>
<div id="snow-container-dom"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('snow-container-dom');
if (!container) return;
const SNOWFLAKE_SYMBOLS = ['❅', '❆', '❄', '*', '•'];
const NUM_FLAKES = 40; // ĐÃ GIẢM: Số lượng bông tuyết từ 80 xuống 40
let flakes = [];
function createFlake() {
const flake = document.createElement('div');
flake.className = 'dom-snowflake';
flake.innerHTML = SNOWFLAKE_SYMBOLS[Math.floor(Math.random() * SNOWFLAKE_SYMBOLS.length)];
const size = Math.random() * 10 + 10;
const speed = Math.random() * 3 + 1;
const sway = Math.random() * 2 - 1;
flake.style.fontSize = size + 'px';
const initialX = Math.random() * window.innerWidth;
const initialY = -size - Math.random() * window.innerHeight;
flake.style.left = initialX + 'px';
flake.style.top = initialY + 'px';
container.appendChild(flake);
return {
element: flake,
x: initialX,
y: initialY,
speed: speed,
sway: sway,
angle: Math.random() * 360
};
}
for (let i = 0; i < NUM_FLAKES; i++) {
flakes.push(createFlake());
}
function animateSnow() {
flakes.forEach(flake => {
// Rơi xuống
flake.y += flake.speed * 0.5;
// Lắc lư ngang bằng hàm sin
flake.x += flake.sway * Math.sin(flake.angle * 0.01);
flake.angle += 1;
// Cập nhật vị trí DOM
flake.element.style.top = flake.y + 'px';
flake.element.style.left = flake.x + 'px';
// Tái tạo lại nếu rơi xuống dưới đáy
if (flake.y > window.innerHeight) {
flake.y = -20;
flake.x = Math.random() * window.innerWidth;
flake.speed = Math.random() * 3 + 1;
}
});
requestAnimationFrame(animateSnow);
}
animateSnow();
});
</script>
<?php
// Kết thúc khối HTML/CSS/JS (trở lại PHP)
}
// Kích hoạt hàm trên hành động wp_footer để mã được chèn vào cuối trang
add_action( 'wp_footer', 'my_christmas_snow_effect' );
Mẫu Số 2 nha
/**
* Thêm hiệu ứng tuyết rơi Giáng sinh (Canvas/JS) vào chân trang.
* Dùng action wp_footer để chèn code HTML/CSS/JS.
*/
function my_christmas_snow_effect() {
// Bắt đầu khối HTML/CSS/JS (thoát khỏi PHP)
?>
<canvas id="snowCanvas"></canvas>
<style>
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Cực kỳ quan trọng: Cho phép click xuyên qua lớp canvas */
pointer-events: none;
/* Đảm bảo tuyết nằm trên hầu hết các thành phần */
z-index: 9999;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('snowCanvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
function setCanvasSize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
setCanvasSize();
window.addEventListener('resize', setCanvasSize);
let snowflakes = [];
const numberOfSnowflakes = 250;
function createSnowflake() {
return {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 3 + 1,
speed: Math.random() * 1.5 + 0.5,
sway: Math.random() * 0.5 - 0.25,
opacity: Math.random() * 0.6 + 0.3
};
}
for (let i = 0; i < numberOfSnowflakes; i++) {
snowflakes.push(createSnowflake());
}
function drawAndAnimate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < numberOfSnowflakes; i++) {
const s = snowflakes[i];
s.y += s.speed;
s.x += s.sway * Math.sin(s.y * 0.01);
ctx.beginPath();
ctx.arc(s.x, s.y, s.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${s.opacity})`;
ctx.fill();
if (s.y > canvas.height) {
snowflakes[i] = createSnowflake();
snowflakes[i].y = -s.radius;
}
}
requestAnimationFrame(drawAndAnimate);
}
drawAndAnimate();
});
</script>
<?php
// Kết thúc khối HTML/CSS/JS (trở lại PHP)
}
// Kích hoạt hàm trên hành động wp_footer để mã được chèn vào cuối trang
add_action( 'wp_footer', 'my_christmas_snow_effect' );
