TIL how to make confetti with CSS. No javascript needed.
I used this codepen as a base and modified it to my needs. The author, @fionnachan, had an interesting method I hadn’t thought of: Make a div for each piece of confetti, transform and skew each one, and then set a random offset so it looks like each one moves independently when you apply keyframes animation. @for
in SCSS makes the random offsets and transforms a breeze.
The only downside is that it compiles to almost 4000 lines of CSS. I’m going to try a JS version and see how it performs in comparison.
UPDATE January 7, 2018: I moved to a JS solution based on https://codepen.io/anon/pen/JMOQzE. 50 lines of code + a jQuery dependency that was already getting loaded anyway is much better than 4000 lines of CSS, even if the CSS is novel.
One response to “CSS Confetti”
This Article was mentioned on cagrimmett.com
Mentions