Cách Tạo Hiệu Ứng Tuyết Rơi Cho Website WordPress

Chào các bạn! Hôm nay mình sẽ hướng dẫn cách tạo hiệu ứng tuyết rơi đẹp mắt cho website WordPress của bạn. Hiệu ứng này rất phù hợp cho mùa Giáng sinh hoặc các dịp lễ đặc biệt.

Cách Tạo Hiệu Ứng Tuyết Rơi Cho Website WordPress

Bước 1: Thêm Code Vào Theme

Đầu tiên, bạn cần thêm đoạn code JavaScript vào website. Có 2 cách:

Thêm vào file functions.php của theme đây là mẫu 1

// Thêm vào file functions.php
function add_snow_effect() {
    if ( is_front_page() ) { // Chỉ hiển thị ở trang chủ
        ?&gt;
        &lt;script&gt;
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.createElement('canvas');
            canvas.style.position = 'fixed';
            canvas.style.top = '0';
            canvas.style.left = '0';
            canvas.style.pointerEvents = 'none';
            canvas.style.zIndex = '9999';
            document.body.appendChild(canvas);

            const ctx = canvas.getContext('2d');
            
            // Cấu hình hiệu ứng
            const settings = {
                flakeCount: 100,  // Số lượng bông tuyết
                minSpeed: 1,      // Tốc độ rơi tối thiểu
                maxSpeed: 3,      // Tốc độ rơi tối đa
                color: '#ffffff', // Màu sắc
                sizeMin: 2,       // Kích thước nhỏ nhất
                sizeMax: 4        // Kích thước lớn nhất
            };

            let flakes = [];

            // Thiết lập canvas
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();

            // Tạo bông tuyết
            function createFlake() {
                return {
                    x: Math.random() * canvas.width,
                    y: 0,
                    size: settings.sizeMin + Math.random() * (settings.sizeMax - settings.sizeMin),
                    speed: settings.minSpeed + Math.random() * (settings.maxSpeed - settings.minSpeed),
                    swing: Math.random() * 2 - 1
                };
            }

            // Khởi tạo bông tuyết
            for (let i = 0; i &lt; settings.flakeCount; i++) {
                flakes.push(createFlake());
            }

            // Vẽ và di chuyển bông tuyết
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = settings.color;

                flakes.forEach(flake =&gt; {
                    ctx.beginPath();
                    ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
                    ctx.fill();

                    // Di chuyển bông tuyết
                    flake.y += flake.speed;
                    flake.x += Math.sin(flake.y * 0.01) * flake.swing;

                    // Reset khi bông tuyết rơi xuống đáy
                    if (flake.y &gt; canvas.height) {
                        Object.assign(flake, createFlake());
                    }
                });

                requestAnimationFrame(animate);
            }

            // Chỉ chạy trên desktop
            if (window.innerWidth &gt; 768) {
                animate();
            }
        });
        &lt;/script&gt;
        &lt;?php
    }
}
add_action('wp_footer', 'add_snow_effect');

// Thêm vào file functions.php

function add_snow_effect() {

if ( is_front_page() ) { // Chỉ hiển thị ở trang chủ

document.addEventListener('DOMContentLoaded', function() {

const canvas = document.createElement('canvas');

canvas.style.position = 'fixed';

canvas.style.top = '0';

canvas.style.left = '0';

canvas.style.pointerEvents = 'none';

canvas.style.zIndex = '9999';

document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

// Cấu hình hiệu ứng

const settings = {

flakeCount: 100, // Số lượng bông tuyết

minSpeed: 1, // Tốc độ rơi tối thiểu

maxSpeed: 3, // Tốc độ rơi tối đa

color: '#ffffff', // Màu sắc

sizeMin: 2, // Kích thước nhỏ nhất

sizeMax: 4 // Kích thước lớn nhất

};

let flakes = [];

// Thiết lập canvas

function resizeCanvas() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

}

window.addEventListener('resize', resizeCanvas);

resizeCanvas();

// Tạo bông tuyết

function createFlake() {

return {

x: Math.random() * canvas.width,

y: 0,

size: settings.sizeMin + Math.random() * (settings.sizeMax - settings.sizeMin),

speed: settings.minSpeed + Math.random() * (settings.maxSpeed - settings.minSpeed),

swing: Math.random() * 2 - 1

};

}

// Khởi tạo bông tuyết

for (let i = 0; i < settings.flakeCount; i++) {

flakes.push(createFlake());

}

// Vẽ và di chuyển bông tuyết

function animate() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = settings.color;

flakes.forEach(flake => {

ctx.beginPath();

ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);

ctx.fill();

// Di chuyển bông tuyết

flake.y += flake.speed;

flake.x += Math.sin(flake.y * 0.01) * flake.swing;

// Reset khi bông tuyết rơi xuống đáy

if (flake.y > canvas.height) {

Object.assign(flake, createFlake());

}

});

requestAnimationFrame(animate);

}

// Chỉ chạy trên desktop

if (window.innerWidth > 768) {

animate();

}

});

</script>

<?php

}

add_action('wp_footer', 'add_snow_effect');

Thêm vào file functions.php của theme đây là mẫu 2

Xem thêm bài viết khác

// Thêm vào file functions.php
function add_snow_effect() {
    if ( is_front_page() ) { // Chỉ hiển thị ở trang chủ
        ?&gt;
		&lt;script type="text/javascript"&gt;
		  // snow-effect.js
		const createSnowflake = () =&gt; {
		    const snowflake = document.createElement('div');
		    snowflake.classList.add('snowflake');
		    snowflake.style.left = Math.random() * window.innerWidth + 'px';
		    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
		    snowflake.style.opacity = Math.random();
		    snowflake.style.fontSize = (Math.random() * 10 + 10) + 'px';
		    snowflake.innerHTML = '❄';
		    return snowflake;
		};

		const startSnowfall = () =&gt; {
		    const container = document.createElement('div');
		    container.id = 'snow-container';
		    document.body.appendChild(container);

		    const addSnowflake = () =&gt; {
		        const snowflake = createSnowflake();
		        container.appendChild(snowflake);
		        
		        snowflake.addEventListener('animationend', () =&gt; {
		            snowflake.remove();
		        });
		    };

		    setInterval(addSnowflake, 100);
		};

		document.addEventListener('DOMContentLoaded', startSnowfall);
		&lt;/script&gt;
        &lt;?php
    }
}
add_action('wp_footer', 'add_snow_effect');

// Thêm vào file functions.php

function add_snow_effect() {

if ( is_front_page() ) { // Chỉ hiển thị ở trang chủ

// snow-effect.js

const createSnowflake = () => {

const snowflake = document.createElement('div');

snowflake.classList.add('snowflake');

snowflake.style.left = Math.random() * window.innerWidth + 'px';

snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';

snowflake.style.opacity = Math.random();

snowflake.style.fontSize = (Math.random() * 10 + 10) + 'px';

snowflake.innerHTML = '❄';

return snowflake;

};

const startSnowfall = () => {

const container = document.createElement('div');

container.id = 'snow-container';

document.body.appendChild(container);

const addSnowflake = () => {

const snowflake = createSnowflake();

container.appendChild(snowflake);

snowflake.addEventListener('animationend', () => {

snowflake.remove();

});

};

setInterval(addSnowflake, 100);

};

document.addEventListener('DOMContentLoaded', startSnowfall);

</script>

<?php

}

add_action('wp_footer', 'add_snow_effect');

Tiếp theo là CSS ở style.css

/* snow-effect.css */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.snowflake {
    position: fixed;
    top: -10px;
    color: #fff;
    animation: fall linear forwards;
}

@keyframes fall {
    to {
        transform: translateY(calc(100vh + 10px));
    }
}

/* snow-effect.css */

#snow-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 9999;

}

.snowflake {

position: fixed;

top: -10px;

color: #fff;

animation: fall linear forwards;

}

@keyframes fall {

to {

transform: translateY(calc(100vh + 10px));

}

Bước 2: Tùy Chỉnh Hiệu Ứng

Bạn có thể điều chỉnh các thông số sau:

flakeCount: Số lượng bông tuyết
minSpeed: Tốc độ rơi tối thiểu
maxSpeed: Tốc độ rơi tối đa
color: Màu sắc bông tuyết
sizeMin: Kích thước nhỏ nhất
sizeMax: Kích thước lớn nhất

Lưu Ý

Không nên đặt số lượng bông tuyết quá nhiều để tránh ảnh hưởng đến tốc độ tải trang
Nên tắt hiệu ứng trên thiết bị di động
Có thể hẹn giờ hiệu ứng chỉ chạy trong mùa Giáng sinh

Theo dỗi tên trên Fanpage và Youtube của mình nhé.