Khi nào nên sử dụng hiệu ứng hoa đào rơi
Hiệu ứng hoa đào rơi phù hợp trong các trường hợp sau:
- Trang chủ hoặc landing page chúc Tết
- Blog, website cá nhân trong dịp đầu năm
- Website doanh nghiệp muốn tạo điểm nhấn theo mùa
Không nên sử dụng hiệu ứng này quanh năm vì có thể gây mất tập trung cho người dùng và làm giảm tính chuyên nghiệp của giao diện.
Cấu trúc cơ bản của hiệu ứng
Hiệu ứng được xây dựng từ ba phần chính:
- Một thẻ HTML làm container chứa các cánh hoa
- CSS để tạo hình dáng và animation rơi
- JavaScript để sinh cánh hoa ngẫu nhiên và tự động dọn dẹp
HTML cần thiết
Chỉ cần thêm một thẻ container vào website, tốt nhất đặt gần cuối trang hoặc trong footer:
<div id="petals-container"></div>CSS tạo hình cánh hoa và chuyển động
Đoạn CSS dưới đây được tối ưu để không ảnh hưởng đến layout và thao tác người dùng:
#petals-container {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.petal {
position: absolute;
width: 8px;
height: 8px;
background: radial-gradient(circle at center, #ff6b9d, #ff1744);
border-radius: 50% 0 50% 0;
opacity: 0.7;
animation: petal-fall linear infinite;
}
@keyframes petal-fall {
from {
transform: translateY(-10px) rotate(0deg);
}
to {
transform: translateY(100vh) rotate(360deg);
}
}
JavaScript tạo hoa đào rơi liên tục
Phần JavaScript chịu trách nhiệm sinh cánh hoa ngẫu nhiên, kiểm soát thời gian rơi và tự xóa phần tử sau khi animation kết thúc để tránh tốn bộ nhớ:
(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 tích hợp vào website và WordPress
Có thể tích hợp hiệu ứng theo các cách sau:
- Đưa CSS vào file style.css của theme
- Đưa JavaScript vào file riêng hoặc chèn ở footer
- Thẻ HTML container đặt trong footer.php hoặc template chính
Nên bật hiệu ứng theo điều kiện thời gian (ví dụ chỉ trong dịp Tết) để đảm bảo trải nghiệm người dùng lâu dài.
Hiệu năng và trải nghiệm người dùng
Hiệu ứng được thiết kế với các tiêu chí:
- Không chặn quá trình render
- Không lắng nghe sự kiện scroll hoặc resize
- Không thao tác layout liên tục
- Tự động dọn dẹp DOM sau khi animation kết thúc
Với cách triển khai này, hiệu ứng hoạt động mượt trên cả desktop và mobile.
Kết luận
Hiệu ứng hoa đào rơi là một cách đơn giản để mang không khí Tết vào website mà không làm ảnh hưởng đến hiệu năng. Chỉ cần tích hợp đúng cách và sử dụng đúng thời điểm, hiệu ứng này sẽ giúp trang web trở nên sinh động và giàu cảm xúc hơn trong những ngày đầu năm.
Bình luận