Dieses Script ist eine praktische Lösung, um Schneefall in deine Webseite zu integrieren. Es ist leichtgewichtig, sofort einsatzbereit und erfordert keine zusätzlichen Frameworks.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Dreamcodes Schnellflocken Effekt</title>
<style>
body {
background: linear-gradient(#1e1e2f, #2c2c44);
overflow: hidden;
height: 100vh;
margin: 0;
}
.flake {
position: fixed;
top: -10px;
color: white;
font-size: 1em;
user-select: none;
pointer-events: none;
animation: fall linear forwards;
}
@keyframes fall {
to {
transform: translateY(110vh) rotate(360deg);
opacity: 0.8;
}
}
</style>
</head>
<body>
<script>
const ANZAHL = 40;
function erzeugeSchnellflocke() {
const flake = document.createElement('div');
flake.classList.add('flake');
flake.textContent = '❄';
flake.style.left = Math.random() * 100 + 'vw';
flake.style.fontSize = Math.random() * 24 + 10 + 'px';
flake.style.animationDuration = Math.random() * 5 + 5 + 's';
flake.style.opacity = Math.random();
document.body.appendChild(flake);
setTimeout(() => flake.remove(), (parseFloat(flake.style.animationDuration) * 1000));
}
setInterval(() => {
if (document.querySelectorAll('.flake').length < ANZAHL) {
erzeugeSchnellflocke();
}
}, 300);
</script>
</body>
</html>
