Tạo hiệu ứng hoa mai rơi ngày Tết bằng HTML, CSS và JavaScript

Mục đích của hiệu ứng hoa mai rơi

Hiệu ứng hoa mai rơi được dùng để:

• Tạo không khí Tết cho trang chủ hoặc landing page
• Làm nổi bật website trong thời gian ngắn đầu năm
• Tăng trải nghiệm cảm xúc mà không ảnh hưởng đến nội dung chính

Hiệu ứng này mang tính trang trí, nên chỉ nên kích hoạt trong dịp Tết để giữ giao diện luôn chuyên nghiệp.

Cấu trúc tổng thể của đoạn code

Đoạn code được chia thành ba phần rõ ràng:

• HTML: tạo container và nội dung minh họa
• CSS: định nghĩa hình dáng hoa mai, màu sắc và animation
• JavaScript: sinh hoa ngẫu nhiên và quản lý vòng đời phần tử

HTML container cho hiệu ứng

Để hoa mai rơi phủ toàn màn hình mà không ảnh hưởng thao tác người dùng, cần một container cố định:

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

Container này được đặt trực tiếp trong body, thường là ở đầu hoặc cuối trang.

CSS tạo hình hoa mai và chuyển động rơi

Hoa mai trong hiệu ứng này được cách điệu bằng hình dạng bo góc chéo, kết hợp màu vàng chuyển sắc để tạo cảm giác mềm và sáng:

#petals-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.petal {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(ellipse at center, #ffd700 0%, #ffb700 100%);
    border-radius: 50% 0 50% 0;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-10px) rotateZ(0deg);
    }
    100% {
        transform: translateY(100vh) rotateZ(360deg);
    }
}

Cách dựng này giúp hiệu ứng nhẹ, không cần hình ảnh, không phụ thuộc thư viện ngoài.

JavaScript tạo hoa mai rơi ngẫu nhiên

JavaScript chịu trách nhiệm tạo các cánh hoa với vị trí, kích thước và tốc độ rơi khác nhau, đồng thời tự động xóa phần tử sau khi hoàn thành animation:

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

    function createPetal() {
        const petal = document.createElement('div');
        petal.className = 'petal';

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

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

        container.appendChild(petal);

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

    setInterval(createPetal, 220);

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

Cách triển khai này đảm bảo DOM luôn được dọn dẹp, không gây tăng bộ nhớ theo thời gian.

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

Có thể tích hợp hiệu ứng theo hướng gọn gàng như sau:

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

Nên bật hiệu ứng theo điều kiện thời gian (chỉ trong dịp Tết) để tối ưu trải nghiệm người dùng.

Đánh giá hiệu năng

Hiệu ứng hoa mai rơi theo cách này có các ưu điểm:

• Không dùng hình ảnh, không dùng thư viện ngoài
• Không ảnh hưởng đến tương tác người dùng
• Không gây reflow liên tục
• Phần tử được tự động xóa sau khi sử dụng

Phù hợp cho cả desktop và thiết bị di động.

Kết luận

Với một đoạn HTML, CSS và JavaScript đơn giản, hiệu ứng hoa mai rơi có thể được tích hợp nhanh chóng vào website để mang không khí Tết rõ ràng và tinh tế. Khi sử dụng đúng thời điểm và đúng mục đích, hiệu ứng này giúp website trở nên sinh động hơn mà vẫn giữ được hiệu năng và sự chuyên nghiệp.