Infinite Vertical Scroll Animation with Confetti Effect | HTML CSS Javascript

In this tutorial, we'll create an infinite vertical scroll animation using HTML, CSS, and Javascript. It features three vertical sliders with a continuous looping animation that scroll in opposite directions. The sliders are synchronized to create a dynamic visual effect by duplicating slides dynamically with Javascript. The layout is built with CSS Grid, and the sliders are animated using CSS keyframes. Additionally, a confetti effect is triggered to enhance the interactive design. Canvas Confetti is used for this effect.

📂 Canvas Confetti: https://www.npmjs.com/package/canvas-confetti
🏞️ The images are designed by Freepik: https://www.freepik.com


⭐Lists:
- Swiper JS: https://www.youtube.com/playlist?list=PLes5YJFlROjF1Lf2RZykNeD-q6KuUYXmn
- GSAP: https://www.youtube.com/playlist?list=PLes5YJFlROjHOLLJBZkwpfUihD_ouui8w
- Slider with Vanilla Javascript & CSS: https://www.youtube.com/playlist?list=PLes5YJFlROjE2USc2RbzJXLzANyxijsUb
- Background Animation: https://www.youtube.com/playlist?list=PLes5YJFlROjE3QNHDn6UNzP5fiMhzQlze
- CSS Animation: https://www.youtube.com/playlist?list=PLes5YJFlROjGxfF4QgD4QwR6noJyCI_8f
- Login Form: https://www.youtube.com/playlist?list=PLes5YJFlROjHBcp9x-HzxGoLC8ibuk8Ft


👩‍💻 My Social Profiles:
- X: https://x.com/ecemgo
- Codepen: https://codepen.io/ecemgo
- GitHub: https://github.com/ecemgo
- TikTok: https://www.tiktok.com/@ecemgo
- Bluesky: https://bsky.app/profile/ecemgo.bsky.social


🕔 Timestamps:
0:00 – Introduction
0:35 – HTML Structure
1:30 – CSS: Layout & Animation
6:09 – JavaScript: Duplicating Slides for Infinite Scroll
6:46 – Adding Confetti Effect with Canvas Confetti