test
This commit is contained in:
92
snowfall.js
Normal file
92
snowfall.js
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
const snowflakes = true; // enable/disable snowflakes
|
||||||
|
const randomSnowflakes = true; // enable random Snowflakes
|
||||||
|
const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
|
||||||
|
const snowflakeCount = 25; // count of random extra snowflakes
|
||||||
|
|
||||||
|
|
||||||
|
let msgPrinted = false; // flag to prevent multiple console messages
|
||||||
|
|
||||||
|
// function to check and control the snowflakes
|
||||||
|
function toggleSnowflakes() {
|
||||||
|
const snowflakeContainer = document.querySelector('.snowflakes');
|
||||||
|
if (!snowflakeContainer) return;
|
||||||
|
|
||||||
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||||
|
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||||
|
const isDashboard = document.body.classList.contains('dashboardDocument');
|
||||||
|
const hasUserMenu = document.querySelector('#app-user-menu');
|
||||||
|
|
||||||
|
// hide snowflakes if video/trailer player is active or dashboard is visible
|
||||||
|
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
||||||
|
snowflakeContainer.style.display = 'none'; // hide snowflakes
|
||||||
|
if (!msgPrinted) {
|
||||||
|
console.log('Snowflakes hidden');
|
||||||
|
msgPrinted = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
snowflakeContainer.style.display = 'block'; // show snowflakes
|
||||||
|
if (msgPrinted) {
|
||||||
|
console.log('Snowflakes visible');
|
||||||
|
msgPrinted = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// observe changes in the DOM
|
||||||
|
const observer = new MutationObserver(toggleSnowflakes);
|
||||||
|
|
||||||
|
// 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
|
||||||
|
|
||||||
|
console.log('Adding random snowflakes');
|
||||||
|
|
||||||
|
const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
|
||||||
|
const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
// create a new snowflake element
|
||||||
|
const snowflake = document.createElement('div');
|
||||||
|
snowflake.classList.add('snowflake');
|
||||||
|
|
||||||
|
// pick a random snowflake symbol
|
||||||
|
if (enableColoredSnowflakes) {
|
||||||
|
snowflake.textContent = snowflakeSymbolsMobile[Math.floor(Math.random() * snowflakeSymbolsMobile.length)];
|
||||||
|
} else {
|
||||||
|
snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
// set random horizontal position, animation delay and size(uncomment lines to enable)
|
||||||
|
const randomLeft = Math.random() * 100; // position (0% to 100%)
|
||||||
|
//const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
|
||||||
|
const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
|
||||||
|
const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
|
||||||
|
|
||||||
|
// apply styles
|
||||||
|
snowflake.style.left = `${randomLeft}%`;
|
||||||
|
//snowflake.style.fontSize = `${randomSize}em`; //uncomment to enable random size
|
||||||
|
snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
|
||||||
|
|
||||||
|
// add the snowflake to the container
|
||||||
|
snowflakeContainer.appendChild(snowflake);
|
||||||
|
}
|
||||||
|
console.log('Random snowflakes added');
|
||||||
|
}
|
||||||
|
|
||||||
|
// initialize snowflakes and add random snowflakes after the DOM is loaded
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
if (!snowflakes) return; // exit if snowflakes are disabled
|
||||||
|
toggleSnowflakes();
|
||||||
|
|
||||||
|
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
|
||||||
|
if (randomSnowflakes && screenWidth > 768) { // add random snowflakes only on larger screens
|
||||||
|
addRandomSnowflakes(snowflakeCount);
|
||||||
|
}
|
||||||
|
});
|
||||||
83
test.html
Normal file
83
test.html
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Schneesturm-Animation</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #000000;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.snowflake {
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="snow-container"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function createSnowflakes() {
|
||||||
|
const container = document.getElementById('snow-container');
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
for (let i = 0; i < 200; i++) {
|
||||||
|
const snowflake = document.createElement('div');
|
||||||
|
snowflake.classList.add('snowflake');
|
||||||
|
|
||||||
|
// Zufällige Größe zwischen 1 und 3 Pixel
|
||||||
|
const size = Math.random() * 3 + 1;
|
||||||
|
snowflake.style.width = `${size}px`;
|
||||||
|
snowflake.style.height = `${size}px`;
|
||||||
|
|
||||||
|
// Zufällige Startposition
|
||||||
|
snowflake.style.left = `${Math.random() * windowWidth}px`;
|
||||||
|
snowflake.style.top = `${Math.random() * windowHeight}px`;
|
||||||
|
|
||||||
|
container.appendChild(snowflake);
|
||||||
|
|
||||||
|
animateSnowflake(snowflake);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateSnowflake(snowflake) {
|
||||||
|
const speed = Math.random() * 3 + 1;
|
||||||
|
const sidewaysMovement = Math.random() * 2 - 1;
|
||||||
|
|
||||||
|
function fall() {
|
||||||
|
const currentTop = parseFloat(snowflake.style.top || 0);
|
||||||
|
const currentLeft = parseFloat(snowflake.style.left || 0);
|
||||||
|
|
||||||
|
// Fallen und seitliche Bewegung
|
||||||
|
snowflake.style.top = `${currentTop + speed}px`;
|
||||||
|
snowflake.style.left = `${currentLeft + sidewaysMovement}px`;
|
||||||
|
|
||||||
|
// Wenn Schneeflocke den Bildschirm verlässt, setze sie zurück oben
|
||||||
|
if (currentTop > window.innerHeight) {
|
||||||
|
snowflake.style.top = '0px';
|
||||||
|
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(fall);
|
||||||
|
}
|
||||||
|
|
||||||
|
fall();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Schneesturm beim Laden der Seite starten
|
||||||
|
createSnowflakes();
|
||||||
|
|
||||||
|
// Bei Fenstergrößenänderung anpassen
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
document.getElementById('snow-container').innerHTML = '';
|
||||||
|
createSnowflakes();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user