Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Bring a Smile to Your Users' Face With a Confetti Celebration

Kevin Powell via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn how to create an engaging confetti celebration animation using CSS and SCSS in this 56-minute tutorial. Discover the value of CSS-only solutions and explore advanced techniques like 3D transformations, perspective, and preserve-3D. Create a container for the confetti, design individual pieces, and set up animations for the explosion and settling effects. Implement JavaScript to trigger the animation on click, and learn how to spread out and randomize confetti pieces for a more realistic effect. Enhance user experience by adding this fun, interactive element to celebrate user achievements in your web projects.

Syllabus

- Introduction
- The value of CSS only solutions
- What we’re starting with
- Adding perspective and using preserve-3D
- Creating the container for our confetti
- Creating our first peice of confetti
- Creating the starting point for our animation
- Running the animation on click with JS
- Adding a second animation for the confetti to settle
- Adding all the confetti peices
- Spreading out the peices
- Adding random vertical offsets

Taught by

Kevin Powell

Reviews

4.0 rating, based on 1 Class Central review

Start your review of Bring a Smile to Your Users' Face With a Confetti Celebration

  • Anonymous
    Overall I loved it. Kevin Powell always puts out great material. I think if the code was available in this course to copy or download that would make it even better. Keep up with the great work.

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.