DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Happy Birthday Confetti Animation πŸŽ‰
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Happy Birthday Confetti Animation πŸŽ‰

Happy birthday to me! Yes, today is my birthday, and since it's a lockdown, I wanted to make an online party popper so everyone can celebrate with me!
At first, I thought about doing one in Canvas, but that would take a lot of time to explain.
So this one is easy to build and pure CSS!

HTML Structure

<div class="container">
  <div class="hoverme">
    <h1>
      Birthday Hover πŸŽ‚
    </h1>
    <i></i>
    <i></i>
    <i></i>
    ... (50x)
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

So what we got here is our usual flex centered container.
And inside we have a div which will act as our hover element.
In there we have a default heading and fifty times a <I> element. This is the element that is our confetti.

CSS Only Confetti Popper

.hoverme {
  width: 240px;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  h1 {
    color: #fff;
    font-size: 1.5em;
  }
  i {
    position: absolute;
    display: block;
    left: 50%;
    top: 0;
    width: 5px;
    height: 10px;
    background: red;
    opacity: 0;
  }
  &:hover {
    @for $i from 1 through 50 {
      i:nth-of-type(#{$i}) {
        transform: translate3d(random(190) - 100 + px, random(200) - 100 + px, 0)
          rotate(random(360) + deg);
        background: hsla(random(360), 100%, 50%, 1);
        animation: bang 700ms ease-out forwards;
        opacity: 0;
      }
    }
  }
}
@keyframes bang {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

As for the CSS we are using SCSS to use variables so we don't have to type 50 times.
Let's walk through this in more detail and see what's happening.

.hoverme {
  width: 240px;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

This is our main element, we center it add some padding and show a pointer as our cursor. We also make this a relative div to place our absolute confetti in.

i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 5px;
  height: 10px;
  background: red;
  opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

Then for our I elements we make them absolute positioned and make them invisible by setting opacity: 0

&:hover {
  @for $i from 1 through 50 {
    i:nth-of-type(#{$i}) {
      transform: translate3d(random(190) - 100 + px, random(200) - 100 + px, 0)
        rotate(random(360) + deg);
      background: hsla(random(360), 100%, 50%, 1);
      animation: bang 700ms ease-out forwards;
      opacity: 0;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

The hover is where the main magic will happen.
So we use CSS variables to loop through fifty numbers (the amount of I we have). Then for each element we do a random transform, the transform will place them somewhere random from the center of our hover div.
Then we give it a random color and add our animation.

@keyframes bang {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

So for the bang animation we transform our elements from position zero and start with full opacity.

This will result in the following:

See the Pen Happy Birthday Confetti Animation by Chris Bongers (@rebelchris) on CodePen.

Happy Birthday to me!

Again, thank you for reading my blog, that is honestly the best birthday present ever, and I hope if you ever have questions, remarks you feel free to reach out to me. 🀟

Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)

Layoffs: It’s Okay to Not Be Okay