Interactive Animation | Pop the Balloons | HTML CSS JS & Canvas Confetti
This tutorial demonstrates how to create an interactive animation using HTML, CSS and JavaScript, where balloons float and pop with a confetti effect. The project uses CSS animations to move the balloons upwards in a loop, while JavaScript handles the click events, making the balloons disappear and triggering confetti when clicked. The confetti originates from the balloon’s position and uses a variety of colors. The animation resets when all balloons are popped, allowing the user to interact again.
📂 Canvas Confetti: https://www.npmjs.com/package/canvas-...
🏞️ The images are designed by Freepik: https://www.freepik.com
⭐ Lists:
Swiper JS: • Swiper JS
GSAP: • GSAP
Slider with Vanilla Javascript & CSS: • Slider with Vanilla Javascript & CSS
Background Animation: • Background Animation
CSS Hover Effect: • CSS Hover Effect
👩💻 My Social Profiles:
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:27 – HTML
0:48 – CSS
1:54 – Javascript
3:53 – Using span tag instead of images