diff --git a/css/style.css b/css/style.css index f85a8fb..7c98ead 100644 --- a/css/style.css +++ b/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; + } } \ No newline at end of file diff --git a/img/Chips.png b/img/Chips.png new file mode 100644 index 0000000..d6e6ee6 Binary files /dev/null and b/img/Chips.png differ diff --git a/impressum.html b/impressum.html index debaf10..5b5a1e1 100644 --- a/impressum.html +++ b/impressum.html @@ -62,7 +62,7 @@ - +
diff --git a/js/script.js b/js/script.js index 1aa5aeb..d162d20 100644 --- a/js/script.js +++ b/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); \ No newline at end of file