Unser JavaScript Script erzeugt eine elegante, realistische Schneeflocken Animation direkt im Browser bzw. auf der jeweilig eingebauten Webseite. Jede Flocke basiert auf einer echten sechszackigen SVG Form, die sich subtil dreht und skaliert, um Tiefe und räumliche Wirkung zu erzeugen. Durch feine Farbverläufe von Weiß zu leicht bläulich goldenen Tönen wirken die Flocken besonders edel und winterlich.
Die Animation simuliert sanfte Windbewegungen, zufällige Rotationen und verschiedene Größen, wodurch ein natürlicher, dynamischer Schneefall entsteht. Flocken im Vordergrund erscheinen größer und heller, während Flocken im Hintergrund kleiner und dezenter dargestellt werden.
Zusätzlich bietet das Script:
- Zwei visuelle Modi: dezent oder brillant, per Button umschaltbar
- Automatisches Respawning der Flocken für kontinuierlichen Schneefall
- Optimierte Performance dank Canvas-Rendering und Device-Pixel-Ratio-Unterstützung
- Responsive Design, das sich an unterschiedliche Bildschirmgrößen anpasst
Ideal für weihnachtliche Webseiten, Landingpages, Header-Animationen oder jede Anwendung, bei der eine elegante, festliche Atmosphäre erzeugt werden soll. Wir wünschen viel Spass und fröhliche Weihnachten.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dreamcodes sechszackige Schneeflocken</title>
<style>
html,body{
margin:0; padding:0; height:100%;
font-family: Inter, system-ui, sans-serif;
background: linear-gradient(180deg,#071128 0%, #081829 100%);
overflow:hidden; color:#fff;
display:flex; align-items:center; justify-content:center;
}
canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none;}
.panel{
position:relative; z-index:5; width:min(1100px,92vw); min-height:420px; padding:2rem;
border-radius:16px; background: rgba(255,255,255,0.05); backdrop-filter:blur(6px);
box-shadow:0 10px 40px rgba(2,6,23,0.6);
}
h1{ margin:0 0 .5rem 0; font-size:1.9rem; letter-spacing:.2px; color:#ffd700;}
p{ margin:0; line-height:1.45; opacity:.9; }
.controls{ position:absolute; right:1rem; top:1rem; display:flex; gap:.5rem; z-index:20;}
.btn{ background:rgba(255,255,255,0.06); border:0; color:#fff; padding:.45rem .7rem; border-radius:10px; cursor:pointer; font-weight:600; backdrop-filter:blur(4px); box-shadow:0 6px 18px rgba(0,0,0,0.35);}
.btn:hover{ background:rgba(255,255,255,0.12);}
</style>
</head>
<body>
<div class="panel">
<div class="controls">
<button id="toggle" class="btn">Schnee anhalten</button>
<button id="mode" class="btn">Modus: dezent</button>
</div>
<h1>Dreamcodes sechszackige Schneeflocken</h1>
<p>Die Schneeflocken basieren auf echten SVG-Formen mit subtilem Farbverlauf, Rotation und Tiefe.</p>
</div>
<canvas id="c"></canvas>
<script>
// === SVG Sechszackige Flocke als Image ===
const flakeSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g stroke="white" stroke-width="1" fill="none">
<line x1="12" y1="0" x2="12" y2="24"/>
<line x1="0" y1="12" x2="24" y2="12"/>
<line x1="3" y1="3" x2="21" y2="21"/>
<line x1="3" y1="21" x2="21" y2="3"/>
<line x1="6" y1="12" x2="18" y2="12"/>
<line x1="12" y1="6" x2="12" y2="18"/>
</g></svg>`;
const flakeImg = new Image();
flakeImg.src = 'data:image/svg+xml;base64,'+btoa(flakeSVG);
// Canvas Setup
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
let W=0,H=0,flakes=[],running=true,mode='dezent',lastTime=0;
// Resize
function resize(){
W = canvas.width = canvas.clientWidth;
H = canvas.height = canvas.clientHeight;
initFlakes();
}
window.addEventListener('resize',resize);
resize();
// Flake Factory
function createFlake(init=false){
const size = Math.random()*6+4;
const z = Math.pow(Math.random(),1.6);
return {
x: Math.random()*W,
y: init? Math.random()*H : -10,
size, z,
vy: 0.3+Math.random()*1.2*(0.5+z),
angle: Math.random()*Math.PI*2,
va: Math.random()*0.02-0.01,
sway: Math.random()*1.5,
};
}
// Init flakes
function initFlakes(){
flakes=[];
for(let i=0;i<120;i++) flakes.push(createFlake(true));
}
// Draw flake
function drawFlake(f){
ctx.save();
ctx.translate(f.x,f.y);
ctx.rotate(f.angle);
const grad = ctx.createRadialGradient(0,0,f.size*0.1,0,0,f.size);
grad.addColorStop(0,'rgba(255,255,255,'+(mode==='dezent'?0.9:1)+')');
grad.addColorStop(1,'rgba(220,240,255,0.05)');
ctx.fillStyle=grad;
ctx.drawImage(flakeImg,-f.size/2,-f.size/2,f.size,f.size);
ctx.restore();
}
// Update loop
function update(dt){
const wind = Math.sin(Date.now()*0.001)*0.2;
for(let f of flakes){
f.x += Math.sin(f.y*0.01+f.sway)*0.3 + wind*(1+f.z);
f.y += f.vy*dt*0.06;
f.angle += f.va*(1+f.z);
if(f.y>H+10||f.x<-10||f.x>W+10){
Object.assign(f,createFlake(false));
f.y=-10;
f.x=Math.random()*W;
}
}
}
// Render loop
function render(now){
if(!lastTime) lastTime=now;
const dt = now-lastTime; lastTime=now;
ctx.clearRect(0,0,W,H);
flakes.sort((a,b)=>a.z-b.z);
for(let f of flakes) drawFlake(f);
if(running) requestAnimationFrame(render);
}
requestAnimationFrame(render);
// Controls
document.getElementById('toggle').addEventListener('click',()=>{running=!running;});
document.getElementById('mode').addEventListener('click',()=>{mode=(mode==='dezent')?'brillant':'dezent';});
</script>
</body>
</html>