Free courses from frontend to fullstack and AI
AI Engineer - Learn how to integrate AI into software applications
Overview
Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
The course demonstrates how to create a click-triggered confetti effect using CSS animations and 3D transforms, with a little SCSS and JavaScript to support the interaction.
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.