Tạo hiệu ứng lồng đèn bay ngày Tết bằng HTML, CSS và JavaScript

Khi nào nên sử dụng hiệu ứng lồng đèn bay

Hiệu ứng này phù hợp trong các tình huống:

• Trang chủ website dịp Tết hoặc lễ hội đầu năm
• Landing page chúc mừng năm mới
• Website cần không khí ấm áp, nhẹ nhàng thay vì hiệu ứng mạnh

Lồng đèn bay mang tính thư giãn, có thể dùng lâu hơn so với pháo hoa hay mưa hiệu ứng.

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

Mỗi lồng đèn là một phần tử DOM:

• Bay từ dưới lên trên
• Có dao động ngang nhẹ như gặp gió
• Màu sắc ấm, độ mờ thay đổi theo độ cao

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

HTML container cho hiệu ứng

Chỉ cần một container phủ toàn màn hình để chứa các lồng đèn:

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

CSS tạo hình lồng đèn

Lồng đèn được dựng bằng hình khối đơn giản, màu ấm và bóng nhẹ để tạo chiều sâu:

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

.lantern {
    position: absolute;
    width: 14px;
    height: 18px;
    background: radial-gradient(circle at center, #ff6f61, #c0392b);
    border-radius: 4px 4px 6px 6px;
    box-shadow: 0 0 12px rgba(255, 99, 71, 0.6);
    animation: lantern-fly linear infinite;
}

.lantern::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 2px;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
}

@keyframes lantern-fly {
    from {
        transform: translateY(100vh) translateX(0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    to {
        transform: translateY(-20vh) translateX(30px) scale(1.1);
        opacity: 0;
    }
}

JavaScript tạo lồng đèn bay tự nhiên

Đoạn JavaScript dưới đây tạo lồng đèn với kích thước, tốc độ và vị trí 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('lantern-container');
    if (!container) return;

    function createLantern() {
        const lantern = document.createElement('div');
        lantern.className = 'lantern';

        const size = Math.random() * 8 + 12;
        const duration = Math.random() * 5 + 8;

        lantern.style.left = Math.random() * 100 + '%';
        lantern.style.width = size + 'px';
        lantern.style.height = size * 1.3 + 'px';
        lantern.style.animationDuration = duration + 's';
        lantern.style.opacity = Math.random() * 0.4 + 0.6;

        container.appendChild(lantern);

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

    setInterval(createLantern, 900);

    for (let i = 0; i < 6; i++) {
        setTimeout(createLantern, i * 400);
    }
})();

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

Cách triển khai gọn gàng và an toàn:

• CSS đưa vào style.css hoặc enqueue style riêng
• JavaScript đặt trong file .js, load ở footer
• HTML container chèn trong footer hoặc thông qua hook wp_footer

Có thể bật hiệu ứng theo điều kiện ngày tháng để chỉ hiển thị trong dịp Tết.

Hiệu năng và trải nghiệm người dùng

Hiệu ứng lồng đèn bay được thiết kế với tiêu chí:

• Không dùng thư viện ngoài
• Không ảnh hưởng tương tác người dùng
• Không gây reflow liên tục
• DOM được dọn dẹp tự động

Hoạt động mượt trên desktop và thiết bị di động.

Kết luận

Hiệu ứng lồng đèn bay mang lại cảm giác ấm áp, tinh tế và rất phù hợp cho website trong dịp Tết. Với cách triển khai đơn giản bằng HTML, CSS và JavaScript thuần, hiệu ứng này có thể dễ dàng tích hợp vào bất kỳ website nào mà không lo ảnh hưởng hiệu năng.