diff --git a/confetti-animation/demo.mp4 b/confetti-animation/demo.mp4 new file mode 100644 index 0000000..588a73b Binary files /dev/null and b/confetti-animation/demo.mp4 differ diff --git a/confetti-animation/index.html b/confetti-animation/index.html new file mode 100644 index 0000000..7f1aa92 --- /dev/null +++ b/confetti-animation/index.html @@ -0,0 +1,94 @@ + + + + + + Confetti animation ✨ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/confetti-animation/readme.md b/confetti-animation/readme.md new file mode 100644 index 0000000..8426724 --- /dev/null +++ b/confetti-animation/readme.md @@ -0,0 +1,4 @@ +# Confetti Animation + + +![Demo](./demo.mp4) \ No newline at end of file diff --git a/confetti-animation/script.js b/confetti-animation/script.js new file mode 100644 index 0000000..637b275 --- /dev/null +++ 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 = '
'; + 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(); \ No newline at end of file diff --git a/confetti-animation/style.css b/confetti-animation/style.css new file mode 100644 index 0000000..76d9bf5 --- /dev/null +++ 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); + } +}