deleted old files
This commit is contained in:
83
test.html
83
test.html
@ -1,83 +0,0 @@
|
||||
<!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