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
Showing Class Central Sort
-
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.