CSS Confetti

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.

CSS Confetti


One response to “CSS Confetti”

  1. Why blog? Avatar

    This Article was mentioned on cagrimmett.com

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: