first test

2024-11-24 18:43:44 +01:00
parent 0b371b2fdd
commit 84a5104772
4 changed files with 232 additions and 0 deletions
--- a/add_to_index_html.html
+++ b/add_to_index_html.html
@@ -0,0 +1,18 @@
+<script src="seasonal/snowflakes.js"></script>
+<link rel="stylesheet" href="seasonal/snowflakes.css">
+<snowflake>
+    <div class="snowflakes" aria-hidden="true">
+        <div class="snowflake"> ❅ </div>
+        <div class="snowflake"> ❆ </div>
+        <div class="snowflake"> ❅ </div>
+        <div class="snowflake"> ❆ </div>
+        <div class="snowflake"> ❅ </div>
+        <div class="snowflake"> ❆ </div>
+        <div class="snowflake"> ❅ </div>
+        <div class="snowflake"> ❆ </div>
+        <div class="snowflake"> ❅ </div>
+        <div class="snowflake"> ❆ </div>
+        <div class="snowflake"> ❅ </div>
+        <div class="snowflake"> ❆ </div>
+    </div>
+</snowflake>
--- a/snowflakes.css
+++ b/snowflakes.css
@@ -0,0 +1,140 @@
+ /* Standard-Style */
+ .snowflake {
+   color: #fff;
+   font-size: 1em;
+   font-family: Arial, sans-serif;
+   text-shadow: 0 0 5px #000;
+   pointer-events: none;
+ }
+
+ @-webkit-keyframes snowflakes-fall {
+   0% {
+     top: -10%;
+   }
+
+   100% {
+     top: 100%;
+   }
+ }
+
+ @-webkit-keyframes snowflakes-shake {
+
+   0%,
+   100% {
+     -webkit-transform: translateX(0);
+     transform: translateX(0);
+   }
+
+   50% {
+     -webkit-transform: translateX(80px);
+     transform: translateX(80px);
+   }
+ }
+
+ @keyframes snowflakes-fall {
+   0% {
+     top: -10%;
+   }
+
+   100% {
+     top: 100%;
+   }
+ }
+
+ @keyframes snowflakes-shake {
+
+   0%,
+   100% {
+     transform: translateX(0);
+   }
+
+   50% {
+     transform: translateX(80px);
+   }
+ }
+
+ .snowflake {
+   position: fixed;
+   top: -10%;
+   z-index: 0;
+   -webkit-user-select: none;
+   user-select: none;
+   cursor: default;
+   animation-name: snowflakes-fall, snowflakes-shake;
+   animation-duration: 10s, 3s;
+   animation-timing-function: linear, ease-in-out;
+   animation-iteration-count: infinite, infinite;
+ }
+
+ .snowflake:nth-of-type(0) {
+   left: 1%;
+   animation-delay: 0s, 0s;
+ }
+
+ .snowflake:nth-of-type(1) {
+   left: 10%;
+   animation-delay: 1s, 1s;
+ }
+
+ .snowflake:nth-of-type(2) {
+   left: 20%;
+   animation-delay: 6s, 0.5s;
+ }
+
+ .snowflake:nth-of-type(3) {
+   left: 30%;
+   animation-delay: 4s, 2s;
+ }
+
+ .snowflake:nth-of-type(4) {
+   left: 40%;
+   animation-delay: 2s, 2s;
+ }
+
+ .snowflake:nth-of-type(5) {
+   left: 50%;
+   animation-delay: 8s, 3s;
+ }
+
+ .snowflake:nth-of-type(6) {
+   left: 60%;
+   animation-delay: 6s, 2s;
+ }
+
+ .snowflake:nth-of-type(7) {
+   left: 70%;
+   animation-delay: 2.5s, 1s;
+ }
+
+ .snowflake:nth-of-type(8) {
+   left: 80%;
+   animation-delay: 1s, 0s;
+ }
+
+ .snowflake:nth-of-type(9) {
+   left: 90%;
+   animation-delay: 3s, 1.5s;
+ }
+
+ .snowflake:nth-of-type(10) {
+   left: 25%;
+   animation-delay: 2s, 0s;
+ }
+
+ .snowflake:nth-of-type(11) {
+   left: 65%;
+   animation-delay: 4s, 2.5s;
+ }
+
+ /* Schneeflocken sichtbar, wenn kein Videoplayer vorhanden */
+ .snowflakes {
+   visibility: visible;
+   z-index: 0;
+   pointer-events: none;
+ }
+
+ /* Schneeflocken ausblenden, wenn Videoplayer aktiv ist */
+ .videoPlayerContainer+.snowflakes,
+ .videoPlayerContainer .snowflakes {
+   visibility: hidden;
+ }
--- a/snowflakes.js
+++ b/snowflakes.js
@@ -0,0 +1,47 @@
+// Beobachte Änderungen an den Attributen des Videoplayer-Containers
+observer.observe(videoPlayer, { attributes: true });
+
+// Funktion, um die Sichtbarkeit der Schneeflocken zu steuern
+function toggleSnowflakes() {
+  const snowflakes = document.querySelector('.snowflakes');
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || isDashboard || hasUserMenu) {
+    // Ausblenden, wenn Videoplayer, Dashboard oder User-Menü aktiv sind
+    snowflakes.style.visibility = 'hidden';
+  } else {
+    // Anzeigen, wenn keine der Bedingungen erfüllt ist
+    snowflakes.style.visibility = 'visible';
+  }
+}
+
+// Beim Laden der Seite ausführen
+document.addEventListener('DOMContentLoaded', toggleSnowflakes);
+
+// Änderungen im DOM überwachen (z. B. Videoplayer hinzugefügt/entfernt)
+const observer = new MutationObserver(toggleSnowflakes);
+observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+
+
+
+
+
+// Anzahl der Schneeflocken
+const snowflakeCount = 50;
+
+// Container für Schneeflocken
+const snowflakeContainer = document.querySelector('.snowflakes');
+
+// Schneeflocken erstellen
+for (let i = 0; i < snowflakeCount; i++) {
+  const snowflake = document.createElement('div');
+  snowflake.classList.add('snowflake');
+  snowflake.textContent = ['❅', '❆', '❄'][Math.floor(Math.random() * 3)]; // Zufällige Schneeflocke
+  snowflake.style.left = Math.random() * 100 + '%'; // Zufällige horizontale Position
+  snowflake.style.animationDelay = Math.random() * 5 + 's'; // Zufällige Verzögerung
+  snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; // Zufällige Dauer
+  snowflake.style.fontSize = Math.random() * 1.5 + 1 + 'em'; // Zufällige Größe
+  snowflakeContainer.appendChild(snowflake);
+}
--- a/v2.js
+++ b/v2.js
@@ -0,0 +1,27 @@
+// Funktion zum Überprüfen und Anpassen der Schneeflocken
+function toggleSnowflakes() {
+  const body = document.body;
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const isDashboard = body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  // Schneeflocken ausblenden, wenn eines der Elemente vorhanden ist
+  if (videoPlayer || isDashboard || hasUserMenu) {
+      body.classList.add('hide-snowflakes');
+  } else {
+      body.classList.remove('hide-snowflakes');
+  }
+}
+
+// Beobachte Änderungen im DOM
+const observer = new MutationObserver(toggleSnowflakes);
+
+// Beobachtung starten
+observer.observe(document.body, {
+  childList: true,    // Überwacht Hinzufügen/Entfernen von Kindelementen
+  subtree: true,      // Überwacht alle Ebenen des DOM-Baums
+  attributes: true    // Überwacht Änderungen an Attributen (z. B. Klassenänderungen)
+});
+
+// Initial ausführen, um den aktuellen Zustand zu überprüfen
+document.addEventListener('DOMContentLoaded', toggleSnowflakes);