v0.0008

Ghislo749 · Oct 28, 2024 · 79eecdf · 79eecdf
1 parent ceb62cb
commit 79eecdf
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 18 deletions.
diff --git a/script.js b/script.js
@@ -29,28 +29,39 @@ async function checkWhitelist() {
 }
 
 function createConfetti() {
-  const confettiCount = 100;
+  const confettiCount = 100; 
   const confettiContainer = document.createElement('div');
   confettiContainer.classList.add('confetti');
 
   for (let i = 0; i < confettiCount; i++) {
       const confettiPiece = document.createElement('div');
       confettiPiece.classList.add('confetti-piece');
-      confettiPiece.style.width = `${Math.random() * 10 + 5}px`;
-      confettiPiece.style.height = `${Math.random() * 10 + 5}px`;
-      confettiPiece.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+
+      // Set random properties for each confetti piece
+      const size = Math.random() * 10 + 5; 
+      confettiPiece.style.width = `${size}px`;
+      confettiPiece.style.height = `${size}px`;
+      confettiPiece.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; // Random color
+
+      // Set random position and animation duration
       confettiPiece.style.position = 'absolute';
-      confettiPiece.style.left = `${Math.random() * 100}%`;
-      confettiPiece.style.top = `${Math.random() * 100}%`;
-      confettiPiece.style.opacity = '0.8';
+      confettiPiece.style.left = `${Math.random() * 100}%`; 
+      confettiPiece.style.top = `0%`; 
+
+      // Randomize the animation duration for each piece
+      const duration = Math.random() * 3 + 2; 
+      confettiPiece.style.animation = `fall ${duration}s ease-in forwards, drift ${duration}s ease-in-out infinite`;
+
       confettiContainer.appendChild(confettiPiece);
   }
 
   document.body.appendChild(confettiContainer);
 
+  // Remove the confetti container after some time
   setTimeout(() => {
       confettiContainer.remove();
-  }, 1000);
+  }, 5000); // Keep confetti on screen for 5 seconds
 }
 
+
 document.getElementById("checkButton").addEventListener("click", checkWhitelist);
diff --git a/styles.css b/styles.css
@@ -70,21 +70,41 @@ button:hover {
 
 /* Confetti styles */
 .confetti {
-    position: absolute;
-    pointer-events: none;
+    position: fixed;
     top: 0;
-    left: 50%;
+    left: 0;
     width: 100%;
-    transform: translateX(-50%);
-    z-index: 10;
-    opacity: 0;
-    animation: fall 1s forwards;
+    height: 100%;
+    pointer-events: none; 
+    overflow: hidden; 
+    z-index: 9999;
+}
+
+.confetti-piece {
+    position: absolute;
+    opacity: 0.8;
+    border-radius: 5px;
+    will-change: transform;
 }
 
 @keyframes fall {
-    to {
-        transform: translateX(-50%) translateY(100vh);
-        opacity: 1;
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(100vh);
+    }
+}
+
+@keyframes drift {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(-30px); /* Drift left */
+    }
+    100% {
+        transform: translateX(0); /* Drift back to center */
     }
 }