CodeDevMLH/Seasonals-Snowflakes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

random snowflakes and observer

Browse Source
This commit is contained in:
MLH
2024-11-24 22:07:13 +01:00
parent 84a5104772
commit 737a7dfde6
3 changed files with 162 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
snowflakes.css
View File

@ -1,140 +1,133 @@
/* Standard-Style */ .snowflakes {
.snowflake { position: fixed;
color: #fff; top: 0;
font-size: 1em; left: 0;
font-family: Arial, sans-serif; width: 100%;
text-shadow: 0 0 5px #000; height: 100%;
pointer-events: none; pointer-events: none;
} z-index: 0;
overflow: hidden;
visibility: visible;
}
@-webkit-keyframes snowflakes-fall { .snowflake {
0% { position: fixed;
top: -10%; top: -10%;
} font-size: 1em;
color: #fff;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
user-select: none;
-webkit-user-select: none;
animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite;
}
100% { @-webkit-keyframes snowflakes-fall {
top: 100%; 0% {
} top: -10%;
} }
@-webkit-keyframes snowflakes-shake { 100% {
top: 100%;
}
}
0%, @-webkit-keyframes snowflakes-shake {
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% { 0%,
-webkit-transform: translateX(80px); 100% {
transform: translateX(80px); -webkit-transform: translateX(0);
} transform: translateX(0);
} }
@keyframes snowflakes-fall { 50% {
0% { -webkit-transform: translateX(80px);
top: -10%; transform: translateX(80px);
} }
}
100% { @keyframes snowflakes-fall {
top: 100%; 0% {
} top: -10%;
} }
@keyframes snowflakes-shake { 100% {
top: 100%;
}
}
0%, @keyframes snowflakes-shake {
100% {
transform: translateX(0);
}
50% { 0%,
transform: translateX(80px); 100% {
} transform: translateX(0);
} }
.snowflake { 50% {
position: fixed; transform: translateX(80px);
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) { .snowflake:nth-of-type(0) {
left: 1%; left: 1%;
animation-delay: 0s, 0s; animation-delay: 0s, 0s;
} }
.snowflake:nth-of-type(1) { .snowflake:nth-of-type(1) {
left: 10%; left: 10%;
animation-delay: 1s, 1s; animation-delay: 1s, 1s;
} }
.snowflake:nth-of-type(2) { .snowflake:nth-of-type(2) {
left: 20%; left: 20%;
animation-delay: 6s, 0.5s; animation-delay: 6s, 0.5s;
} }
.snowflake:nth-of-type(3) { .snowflake:nth-of-type(3) {
left: 30%; left: 30%;
animation-delay: 4s, 2s; animation-delay: 4s, 2s;
} }
.snowflake:nth-of-type(4) { .snowflake:nth-of-type(4) {
left: 40%; left: 40%;
animation-delay: 2s, 2s; animation-delay: 2s, 2s;
} }
.snowflake:nth-of-type(5) { .snowflake:nth-of-type(5) {
left: 50%; left: 50%;
animation-delay: 8s, 3s; animation-delay: 8s, 3s;
} }
.snowflake:nth-of-type(6) { .snowflake:nth-of-type(6) {
left: 60%; left: 60%;
animation-delay: 6s, 2s; animation-delay: 6s, 2s;
} }
.snowflake:nth-of-type(7) { .snowflake:nth-of-type(7) {
left: 70%; left: 70%;
animation-delay: 2.5s, 1s; animation-delay: 2.5s, 1s;
} }
.snowflake:nth-of-type(8) { .snowflake:nth-of-type(8) {
left: 80%; left: 80%;
animation-delay: 1s, 0s; animation-delay: 1s, 0s;
} }
.snowflake:nth-of-type(9) { .snowflake:nth-of-type(9) {
left: 90%; left: 90%;
animation-delay: 3s, 1.5s; animation-delay: 3s, 1.5s;
} }
.snowflake:nth-of-type(10) { .snowflake:nth-of-type(10) {
left: 25%; left: 25%;
animation-delay: 2s, 0s; animation-delay: 2s, 0s;
} }
.snowflake:nth-of-type(11) { .snowflake:nth-of-type(11) {
left: 65%; left: 65%;
animation-delay: 4s, 2.5s; animation-delay: 4s, 2.5s;
} }
/* Schneeflocken sichtbar, wenn kein Videoplayer vorhanden */ body.hide-snowflakes .snowflakes {
.snowflakes { visibility: hidden;
visibility: visible; }
z-index: 0;
pointer-events: none;
}
/* Schneeflocken ausblenden, wenn Videoplayer aktiv ist */
.videoPlayerContainer+.snowflakes,
.videoPlayerContainer .snowflakes {
visibility: hidden;
}

74
snowflakes.js
View File

@ -1,47 +1,65 @@
// Beobachte Änderungen an den Attributen des Videoplayer-Containers let randomSnowflakes = flase; // enable random Snowflakes
observer.observe(videoPlayer, { attributes: true }); const snowflakeCount = 50; // count of random extra snowflakes
// Funktion, um die Sichtbarkeit der Schneeflocken zu steuern
// function to check and control the snowflakes
function toggleSnowflakes() { function toggleSnowflakes() {
const snowflakes = document.querySelector('.snowflakes'); const body = document.body;
const videoPlayer = document.querySelector('.videoPlayerContainer'); const videoPlayer = document.querySelector('.videoPlayerContainer');
const isDashboard = document.body.classList.contains('dashboardDocument'); const isDashboard = body.classList.contains('dashboardDocument');
const hasUserMenu = document.querySelector('#app-user-menu'); const hasUserMenu = document.querySelector('#app-user-menu');
// hide snowflakes if video player is active or dashboard is visible
if (videoPlayer || isDashboard || hasUserMenu) { if (videoPlayer || isDashboard || hasUserMenu) {
// Ausblenden, wenn Videoplayer, Dashboard oder User-Menü aktiv sind body.classList.add('hide-snowflakes');
snowflakes.style.visibility = 'hidden';
} else { } else {
// Anzeigen, wenn keine der Bedingungen erfüllt ist body.classList.remove('hide-snowflakes');
snowflakes.style.visibility = 'visible';
} }
} }
// Beim Laden der Seite ausführen // observe changes in the DOM
document.addEventListener('DOMContentLoaded', toggleSnowflakes);
// Änderungen im DOM überwachen (z. B. Videoplayer hinzugefügt/entfernt)
const observer = new MutationObserver(toggleSnowflakes); const observer = new MutationObserver(toggleSnowflakes);
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
// start observation
observer.observe(document.body, {
childList: true, // observe adding/removing of child elements
subtree: true, // observe all levels of the DOM tree
attributes: true // observe changes to attributes (e.g. class changes)
});
function addRandomSnowflakes(count) {
const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
if (!snowflakeContainer) return; // exit if snowflake container is not found
const snowflakeSymbols = ['❅', '❆', '❄']; // some snowflake symbols
for (let i = 0; i < count; i++) {
// create a new snowflake element
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// Anzahl der Schneeflocken // pick a random snowflake symbol
const snowflakeCount = 50; snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
// Container für Schneeflocken // set random horizontal position, size and animation delay
const snowflakeContainer = document.querySelector('.snowflakes'); const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em)
const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s)
// Schneeflocken erstellen // apply styles
for (let i = 0; i < snowflakeCount; i++) { snowflake.style.left = `${randomLeft}%`;
const snowflake = document.createElement('div'); snowflake.style.fontSize = `${randomSize}em`;
snowflake.classList.add('snowflake'); snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`;
snowflake.textContent = ['❅', '❆', '❄'][Math.floor(Math.random() * 3)]; // Zufällige Schneeflocke
snowflake.style.left = Math.random() * 100 + '%'; // Zufällige horizontale Position // add the snowflake to the container
snowflake.style.animationDelay = Math.random() * 5 + 's'; // Zufällige Verzögerung snowflakeContainer.appendChild(snowflake);
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);
} }
// initialize snowflakes
document.addEventListener('DOMContentLoaded', () => {
toggleSnowflakes(); //check if snowflakes should be hidden
if (randomSnowflakes) {
addRandomSnowflakes(snowflakeCount); //add random snowflakes
}
});

10
v2.js
View File

@ -1,15 +1,15 @@
// Funktion zum Überprüfen und Anpassen der Schneeflocken // Funktion zum Überprüfen und Steuern der Schneeflocken
function toggleSnowflakes() { function toggleSnowflakes() {
const body = document.body; const body = document.body;
const videoPlayer = document.querySelector('.videoPlayerContainer'); const videoPlayer = document.querySelector('.videoPlayerContainer');
const isDashboard = body.classList.contains('dashboardDocument'); const isDashboard = body.classList.contains('dashboardDocument');
const hasUserMenu = document.querySelector('#app-user-menu'); const hasUserMenu = document.querySelector('#app-user-menu');
// Schneeflocken ausblenden, wenn eines der Elemente vorhanden ist // Schneeflocken ausblenden, wenn Videoplayer aktiv ist oder Dashboard sichtbar ist
if (videoPlayer || isDashboard || hasUserMenu) { if (videoPlayer || isDashboard || hasUserMenu) {
body.classList.add('hide-snowflakes'); body.classList.add('hide-snowflakes');
} else { } else {
body.classList.remove('hide-snowflakes'); body.classList.remove('hide-snowflakes');
} }
} }
@ -23,5 +23,5 @@ observer.observe(document.body, {
attributes: true // Überwacht Änderungen an Attributen (z. B. Klassenänderungen) attributes: true // Überwacht Änderungen an Attributen (z. B. Klassenänderungen)
}); });
// Initial ausführen, um den aktuellen Zustand zu überprüfen // Initiale Überprüfung
document.addEventListener('DOMContentLoaded', toggleSnowflakes); document.addEventListener('DOMContentLoaded', toggleSnowflakes);