<div class="container">
  <div class="parallax">
    <img src="https://returnpath.com/assets/images/backgrounds/background-confetti-xl-arcade.svg;">
    <img src="https://returnpath.com/assets/images/backgrounds/background-confetti-lg-arcade.svg;">
    <img src="https://returnpath.com/assets/images/backgrounds/background-confetti-md-arcade.svg;">
    <img src="https://returnpath.com/assets/images/backgrounds/background-confetti-sm-arcade.svg;">
    <img src="https://returnpath.com/assets/images/backgrounds/background-confetti-xs-arcade.svg">
  </div>
</div>

$layers: 5;
$duration: 200s;

@keyframes confetti {
  0% { top: 100%; };
  100% { top: -100%; };
}

body {
  background: #000;
  background-image: radial-gradient(circle at top left,#000,#3c4858)
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translateX(-50%) translateZ(0);
    animation: confetti linear infinite;

    @for $i from 1 through $layers {
      &:nth-child(#{$i}) {
        animation-delay: $duration * (($i - $layers) / $layers);
        animation-duration: $duration * ($i / $layers);
      }
    }
  }
}