🎆 Hiệu Ứng Pháo Hoa Kết Hợp Hình Ảnh & Chữ Trên Canvas – Tỏa Sáng Tình Yêu!

Bạn đang tìm một cách để tạo hiệu ứng pháo hoa rực rỡ, kết hợp với chữ nổi bật hoặc hình ảnh ngọt ngào như một món quà tặng kỹ thuật số? Trong bài viết này, mình sẽ giới thiệu một dự án canvas đơn giản nhưng cực kỳ ấn tượng và cảm xúc, sử dụng HTML5 + JavaScript thuần (không dùng thư viện ngoài!).

✨ Tổng Quan Dự Án

✅ Công nghệ: HTML5 Canvas + JavaScript
🔥 Hiệu ứng chính: Pháo hoa bay lên – phát nổ – hiển thị chữ “LOVE” hoặc ảnh trái tim
🧡 Dành cho: Lập trình viên web sáng tạo, quà tặng kỹ thuật số, màn trình chiếu tình cảm
📱 Hỗ trợ: Tự responsive trên mọi kích thước màn hình

🎇 Các Hiệu Ứng Đặc Sắc

💥 1. Pháo Hoa Bay & Nổ

• Mỗi pháo hoa là một object có đích đến cụ thể trên canvas

• Khi đến nơi, nó phát nổ thành hàng chục hạt nhỏ (particles) bay ra, tạo hiệu ứng tỏa sáng rực rỡ

• Tạo cảm giác như thật nhờ các thuộc tính vật lý mô phỏng như: lực cản, trọng lực, độ sáng, mờ dần

🔤 2. Hiển Thị Chữ "LOVE"

• Chữ được hiển thị tại đúng vị trí nổ của pháo hoa, với font to, đậm và hiệu ứng glow màu sắc

• Kỹ thuật chuyển alpha mượt (fade in, giữ, fade out) tạo nên cảm giác xuất hiện mềm mại và mờ dần

🖼️ 3. Ảnh Lãng Mạn Xuất Hiện Trên Trời

• Bạn có thể cung cấp đường dẫn ảnh PNG để hiển thị như một phần của pháo hoa

• Ảnh được hiển thị với bóng mờ + blur nhẹ, tăng tính huyền ảo

• Hiện tại ảnh sử dụng từ Cloudinary CDN, bạn có thể thay đổi thành ảnh của mình rất dễ dàng

⏱️ 4. Hoạt Động Theo Chu Kỳ

• Pháo hoa chữ, pháo hoa ảnh và pháo ngẫu nhiên sẽ tự động xuất hiện theo setInterval

• Có thể cấu hình tần suất hoặc luân phiên hiển thị theo chuỗi (ví dụ: từng chữ trong "LOVE")

🧠 Kỹ Thuật Đáng Chú Ý

🔒 Giới Hạn “Vùng An Toàn”

• Pháo hoa chỉ bay trong khu vực trung tâm canvas, tránh các mép để không bị che khuất

• Dùng getSafeAreaX/Y() để tính vùng an toàn và ràng buộc tọa độ

🔁 Hệ thống Đối Tượng

• Firework: Di chuyển từ đáy canvas đến mục tiêu rồi phát nổ

• Particle: Tỏa ra từ vụ nổ, bay dần và mờ đi

• Text: Hiển thị các ký tự như L, O, V, E với hiệu ứng fade

• ImageDisplay: Hiển thị ảnh PNG ở vị trí nổ với bóng mờ và mờ dần

👀 Quản Lý Hiệu Suất

• Khi tab trình duyệt bị ẩn (visibilitychange), tự động dừng animation và clear interval để tiết kiệm tài nguyên

• Khi trở lại, tiếp tục chạy animation và tạo pháo hoa như ban đầu

🎁 Demo & Mã Nguồn

🎬 Bạn có thể xem hiệu ứng trực tiếp hoặc tùy chỉnh tại đây:
🔗 [Xem demo tại đây Click Here]

💾 Tải mã nguồn từ GitHub

❤️ Lời Kết

Đôi khi, chỉ với vài dòng mã JavaScript và một chút sáng tạo, bạn đã có thể biến màn hình web thành một sân khấu pháo hoa đầy yêu thương. Đây là một cách tuyệt vời để gửi đi thông điệp, lời chúc, hoặc đơn giản là làm người bạn yêu thương mỉm cười 😊