Chips sollen im Impressum fallen

css/style.css

@@ -226,4 +226,28 @@ Für Bilder
 img {
     max-width: 100%;
     height: auto;
+}
+
+Für fallende Chips
+
+.chip {
+    position: fixed;
+    top: -100px;
+    width: 80px;
+    height: auto;
+    pointer-events: none;
+    animation: fall linear forwards;
+    z-index: 9999;
+}
+
+@keyframes fall {
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(110vh) rotate(360deg);
+        opacity: 0;
+    }
 }

impressum.html

@@ -62,7 +62,7 @@
 <footer>
     <p>&copy; 2026 - Lernprojekt EIS</p>
 </footer>
-
+<div class="chip-rain"></div>
 <script src="script.js"></script>
 
 </body>

js/script.js

@@ -1 +1,27 @@
 console.log ("Meine Seite läuft");
+Für die fallenden Chips
+
+function createChip() {
+
+    const chip = document.createElement("img");
+
+    chip.src = "img/Chips.png";
+
+    chip.classList.add("chip");
+
+    chip.style.left = Math.random() * window.innerWidth + "px";
+
+    chip.style.animationDuration =
+        (Math.random() * 3 + 3) + "s";
+
+    chip.style.width =
+        (Math.random() * 50 + 50) + "px";
+
+    document.body.appendChild(chip);
+
+    setTimeout(() => {
+        chip.remove();
+    }, 6000);
+}
+
+setInterval(createChip, 300);