83 lines
2.6 KiB
HTML
83 lines
2.6 KiB
HTML
<!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> |