A Pen by Manel García

Thumbnail
This awesome code was written by manelgarcia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright manelgarcia ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Manel García</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='confetti'>
  <div class='confetti-content'>
    <button class='confetti__button'>Give me confetti!</button>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
    <i class='confetti__item'></i>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/manelgarcia/a-pen-by-manel-garcandxeda-vJvoXJ */
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("37px") translateY("9px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("29px") translateY("82px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("91px") translateY("6px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("77px") translateY("26px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("12px") translateY("68px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("18px") translateY("20px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("17px") translateY("28px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("37px") translateY("52px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("10px") translateY("41px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("64px") translateY("3px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("67px") translateY("71px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("50px") translateY("22px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("98px") translateY("56px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("87px") translateY("99px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("24px") translateY("64px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("79px") translateY("39px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("40px") translateY("31px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("64px") translateY("11px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("40px") translateY("92px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("64px") translateY("33px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("24px") translateY("34px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("54px") translateY("72px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("54px") translateY("36px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("1px") translateY("100px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("83px") translateY("95px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("97px") translateY("12px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("65px") translateY("76px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("36px") translateY("76px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("33px") translateY("65px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("51px") translateY("7px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("31px") translateY("40px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("32px") translateY("17px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("90px") translateY("88px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("25px") translateY("91px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("16px") translateY("19px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("73px") translateY("52px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("45px") translateY("48px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("79px") translateY("28px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("40px") translateY("79px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("22px") translateY("65px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("39px") translateY("50px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("90px") translateY("35px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("47px") translateY("94px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("82px") translateY("9px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("92px") translateY("33px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("61px") translateY("71px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("49px") translateY("72px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("24px") translateY("52px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("40px") translateY("82px");
  }
}
@keyframes animate-$i {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX("74px") translateY("25px");
  }
}
.confetti-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 500px;
  height: 500px;
  border: 1px solid green;
}

.confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}
.confetti__item {
  position: absolute;
  width: 15px;
  height: 5px;
  background-color: salmon;
}
.confetti__item--active {
  animation-name: "animate-41";
  animation-delay: "0.96s";
  animation-iteration-count: 1;
  animation-duration: "0.08s";
  animation-direction: normal;
}


/*Downloaded from https://www.codeseek.co/manelgarcia/a-pen-by-manel-garcandxeda-vJvoXJ */
$('button').on('click', function (e) {
  $('.confetti__item').addClass('confetti__item--active');
})

Comments