Added confetti animation

pulkit-30 · Oct 3, 2021 · 120c54e · 120c54e
1 parent 827b61a
commit 120c54e
Show file tree

Hide file tree

Showing 5 changed files with 252 additions and 0 deletions.
diff --git a/confetti-animation/demo.mp4 b/confetti-animation/demo.mp4
diff --git a/confetti-animation/index.html b/confetti-animation/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Confetti animation ✨</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="confetti-land">
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+      <div class="confetti"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/confetti-animation/readme.md b/confetti-animation/readme.md
@@ -0,0 +1,4 @@
+# Confetti Animation
+
+
+![Demo](./demo.mp4)
diff --git a/confetti-animation/script.js b/confetti-animation/script.js
@@ -0,0 +1,28 @@
+var confettiPlayers = [];
+
+function makeItConfetti() {
+  var confetti = document.querySelectorAll('.confetti');
+
+  if (!confetti[0].animate) {
+    return false;
+  }
+
+  for (var i = 0, len = confetti.length; i < len; ++i) {
+    var snowball = confetti[i];
+    snowball.innerHTML = '<div class="rotate"><div class="askew"></div></div>';
+    var scale = Math.random() * .8 + .2;
+    var player = snowball.animate([
+      { transform: 'translate3d(' + (i/len*100) + 'vw,0,0) scale(' + scale + ')', opacity: scale },
+      { transform: 'translate3d(' + (i/len*100 + 10) + 'vw,100vh,0) scale(' + scale + ')', opacity: 1 }
+    ], {
+      duration: Math.random() * 3000 + 3000,
+      iterations: Infinity,
+      delay: -(Math.random() * 5000)
+    });
+
+
+    confettiPlayers.push(player);
+  }
+}
+
+makeItConfetti();
diff --git a/confetti-animation/style.css b/confetti-animation/style.css
@@ -0,0 +1,126 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  background: #fff;
+  background: radial-gradient(circle, #eee, #fff);
+  overflow: hidden;
+  height: 100vh;
+  width: 100%;
+  user-select: none;
+  padding: 0;
+  margin: 0;
+}
+
+.confetti {
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  position: absolute;
+  top: -1rem;
+  left: 0;
+  z-index: 150;
+}
+.confetti .rotate {
+  animation: driftyRotate 1s infinite both ease-in-out;
+  perspective: 1000;
+}
+.confetti .askew {
+  background: currentColor;
+  transform: skewY(10deg);
+  width: 1rem;
+  height: 1rem;
+  animation: drifty 1s infinite alternate both ease-in-out;
+  perspective: 1000;
+  border-radius: 100%;
+}
+
+.confetti:nth-of-type(5n) {
+  color: #e35a41;
+}
+.confetti:nth-of-type(5n + 1) {
+  color: #fbb431;
+}
+.confetti:nth-of-type(5n + 2) {
+  color: #01b8c3;
+}
+.confetti:nth-of-type(5n + 3) {
+  color: #e35a41;
+}
+.confetti:nth-of-type(5n + 4) {
+  color: #6d52b8;
+}
+
+.confetti:nth-of-type(7n) .askew {
+  animation-delay: -0.6s;
+  animation-duration: 2.25s;
+}
+.confetti:nth-of-type(7n + 1) .askew {
+  animation-delay: -0.879s;
+  animation-duration: 3.5s;
+}
+.confetti:nth-of-type(7n + 2) .askew {
+  animation-delay: -0.11s;
+  animation-duration: 1.95s;
+}
+.confetti:nth-of-type(7n + 3) .askew {
+  animation-delay: -0.246s;
+  animation-duration: 0.85s;
+}
+.confetti:nth-of-type(7n + 4) .askew {
+  animation-delay: -0.43s;
+  animation-duration: 2.5s;
+}
+.confetti:nth-of-type(7n + 5) .askew {
+  animation-delay: -0.56s;
+  animation-duration: 1.75s;
+}
+.confetti:nth-of-type(7n + 6) .askew {
+  animation-delay: -0.76s;
+  animation-duration: 1.5s;
+}
+
+.confetti:nth-of-type(9n) .rotate {
+  animation-duration: 2s;
+}
+.confetti:nth-of-type(9n + 1) .rotate {
+  animation-duration: 2.3s;
+}
+.confetti:nth-of-type(9n + 2) .rotate {
+  animation-duration: 1.1s;
+}
+.confetti:nth-of-type(9n + 3) .rotate {
+  animation-duration: 0.75s;
+}
+.confetti:nth-of-type(9n + 4) .rotate {
+  animation-duration: 4.3s;
+}
+.confetti:nth-of-type(9n + 5) .rotate {
+  animation-duration: 3.05s;
+}
+.confetti:nth-of-type(9n + 6) .rotate {
+  animation-duration: 2.76s;
+}
+.confetti:nth-of-type(9n + 7) .rotate {
+  animation-duration: 7.6s;
+}
+.confetti:nth-of-type(9n + 8) .rotate {
+  animation-duration: 1.78s;
+}
+
+@keyframes drifty {
+  0% {
+    transform: skewY(10deg) translate3d(-250%, 0, 0);
+  }
+  100% {
+    transform: skewY(-12deg) translate3d(250%, 0, 0);
+  }
+}
+@keyframes driftyRotate {
+  0% {
+    transform: rotateX(0);
+  }
+  100% {
+    transform: rotateX(359deg);
+  }
+}