Tạo hiệu ứng mưa lì xì ngày Tết bằng HTML, CSS và JavaScript

Khi nào nên sử dụng hiệu ứng mưa lì xì

Hiệu ứng mưa lì xì phù hợp trong các trường hợp:

• Landing page khuyến mãi, ưu đãi Tết
• Website thương mại điện tử trong dịp đầu năm
• Trang chúc mừng năm mới mang tính vui nhộn

Đây là hiệu ứng có độ thu hút cao, nên sử dụng có chừng mực và trong thời gian ngắn để tránh gây rối mắt.

Ý tưởng triển khai hiệu ứng

Mỗi bao lì xì là một phần tử DOM:

• Rơi từ trên xuống dưới màn hình
• Có xoay nhẹ và tốc độ rơi khác nhau
• Màu đỏ chủ đạo, điểm nhấn vàng tượng trưng cho tài lộc

JavaScript chỉ làm nhiệm vụ sinh và dọn phần tử, animation được xử lý bằng CSS.

HTML container cho mưa lì xì

Thêm một container phủ toàn màn hình để chứa các bao lì xì:

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

CSS tạo hình bao lì xì và hiệu ứng rơi

Bao lì xì được cách điệu bằng hình chữ nhật bo góc, màu đỏ chuyển sắc và biểu tượng vàng ở giữa:

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

.lixi {
    position: absolute;
    width: 14px;
    height: 20px;
    background: linear-gradient(180deg, #d63031, #c0392b);
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(214, 48, 49, 0.4);
    animation: lixi-fall linear infinite;
}

.lixi::after {
    content: "福";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #f1c40f;
}

@keyframes lixi-fall {
    from {
        transform: translateY(-10px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

JavaScript tạo mưa lì xì tự nhiên

Đoạn JavaScript dưới đây tạo bao lì xì với kích thước, tốc độ và độ mờ ngẫu nhiên, đồng thời tự động xóa phần tử sau khi animation kết thúc:

(function () {
    const container = document.getElementById('lixi-container');
    if (!container) return;

    function createLixi() {
        const lixi = document.createElement('div');
        lixi.className = 'lixi';

        const size = Math.random() * 6 + 12;
        const duration = Math.random() * 3 + 4;

        lixi.style.left = Math.random() * 100 + '%';
        lixi.style.width = size + 'px';
        lixi.style.height = size * 1.4 + 'px';
        lixi.style.animationDuration = duration + 's';
        lixi.style.opacity = Math.random() * 0.4 + 0.5;

        container.appendChild(lixi);

        setTimeout(() => {
            lixi.remove();
        }, (duration + 1) * 1000);
    }

    setInterval(createLixi, 260);

    for (let i = 0; i < 12; i++) {
        setTimeout(createLixi, i * 120);
    }
})();

Cách tích hợp vào website và WordPress

Để tích hợp hiệu ứng gọn gàng:

• Đưa CSS vào style.css hoặc enqueue style riêng
• Đưa JavaScript vào file .js và load ở footer
• HTML container chèn vào footer hoặc hook wp_footer

Nên bật hiệu ứng theo thời gian hoặc theo trang cụ thể để tránh gây quá tải thị giác.

Đánh giá hiệu năng

Hiệu ứng mưa lì xì được thiết kế với các tiêu chí:

• Không dùng hình ảnh, không thư viện ngoài
• Không ảnh hưởng thao tác người dùng
• Không tạo DOM tồn tại lâu
• Tự động dọn dẹp sau mỗi animation

Có thể sử dụng ổn định trên cả desktop và mobile.

Kết luận

Hiệu ứng mưa lì xì là lựa chọn phù hợp cho website cần không khí vui tươi và thu hút trong dịp Tết. Khi được triển khai đúng cách và sử dụng có kiểm soát, hiệu ứng này giúp tăng cảm xúc người dùng mà vẫn giữ được hiệu năng và tính chuyên nghiệp của website.