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-...
🏞️ 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:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 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