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

2nd test

Browse Source
This commit is contained in:
MLH
2024-11-24 22:42:13 +01:00
parent 737a7dfde6
commit 077302e181
3 changed files with 32 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
snowflakes.css
View File

@@ -1,13 +1,8 @@
.snowflakes { .snowflakes {
position: fixed; display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
visibility: visible;
} }
.snowflake { .snowflake {
@@ -19,7 +14,11 @@
text-shadow: 0 0 5px #000; text-shadow: 0 0 5px #000;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite; cursor: default;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
} }
@-webkit-keyframes snowflakes-fall { @-webkit-keyframes snowflakes-fall {
@@ -127,7 +126,3 @@
left: 65%; left: 65%;
animation-delay: 4s, 2.5s; animation-delay: 4s, 2.5s;
} }
body.hide-snowflakes .snowflakes {
visibility: hidden;
}

24
snowflakes.js
View File

@@ -1,19 +1,21 @@
let randomSnowflakes = flase; // enable random Snowflakes const randomSnowflakes = flase; // enable random Snowflakes
const snowflakeCount = 50; // count of random extra snowflakes const snowflakeCount = 50; // count of random extra snowflakes
// function to check and control the snowflakes // function to check and control the snowflakes
function toggleSnowflakes() { function toggleSnowflakes() {
const body = document.body; const snowflakeContainer = document.querySelector('.snowflakes');
if (!snowflakeContainer) return;
const videoPlayer = document.querySelector('.videoPlayerContainer'); const videoPlayer = document.querySelector('.videoPlayerContainer');
const isDashboard = body.classList.contains('dashboardDocument'); const isDashboard = document.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 // hide snowflakes if video player is active or dashboard is visible
if (videoPlayer || isDashboard || hasUserMenu) { if (videoPlayer || isDashboard || hasUserMenu) {
body.classList.add('hide-snowflakes'); snowflakeContainer.style.display = 'none'; // hide snowflakes
} else { } else {
body.classList.remove('hide-snowflakes'); snowflakeContainer.style.display = 'block'; // show snowflakes
} }
} }
@@ -43,12 +45,12 @@ function addRandomSnowflakes(count) {
// set random horizontal position, size and animation delay // set random horizontal position, size and animation delay
const randomLeft = Math.random() * 100; // position (0% to 100%) const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em)
const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s) const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s)
// apply styles // apply styles
snowflake.style.left = `${randomLeft}%`; snowflake.style.left = `${randomLeft}%`;
snowflake.style.fontSize = `${randomSize}em`; //snowflake.style.fontSize = `${randomSize}em`;
snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`; snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`;
// add the snowflake to the container // add the snowflake to the container
@@ -57,9 +59,7 @@ function addRandomSnowflakes(count) {
} }
// initialize snowflakes // initialize snowflakes
document.addEventListener('DOMContentLoaded', () => { toggleSnowflakes(); //check if snowflakes should be hidden
toggleSnowflakes(); //check if snowflakes should be hidden if (randomSnowflakes) {
if (randomSnowflakes) {
addRandomSnowflakes(snowflakeCount); //add random snowflakes addRandomSnowflakes(snowflakeCount); //add random snowflakes
} }
});

27
v2.js
View File

@@ -1,27 +0,0 @@
// Funktion zum Überprüfen und Steuern 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 Videoplayer aktiv ist oder Dashboard sichtbar 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)
});
// Initiale Überprüfung
document.addEventListener('DOMContentLoaded', toggleSnowflakes);