Sne på hjemmeside – Guide til at lave snefnug på din hjemmeside:
10 gode eksempler
December nærmer sig, og med det kommer den stemningsfulde vintertid fyldt med sne, hygge og festligheder. Men hvorfor nøjes med sne udenfor, når du kan bringe den vinterlige magi direkte ind på din hjemmeside? Snefnug, der daler ned over din side, skaber ikke kun en varm og indbydende atmosfære, men det viser også dine besøgende, at du går det ekstra skridt for at skabe en unik oplevelse.
Følg med hele december, da der vil komme flere og flere eksempler på.

Uanset om du vil skabe en subtil vinterstemning eller fuld juleglæde, kan snefnug være den perfekte detalje, der løfter din hjemmesides udtryk. Sneen i ovenstående div holder, er en af de effekter jeg her viser hvordan man laver. I denne guide viser vi dig, hvordan du nemt kan implementere snefnug på forskellige måder – lige fra elegante animationer til realistiske snefnug, der føles som en hel vinterstorm. Lad os komme i gang og gøre din hjemmeside klar til december-magi! 🎄❄️
Simpel snefnug animation med CSS (eksempel 1)
Skab stemning på din hjemmeside med en simpel og let snefnug-animation, der kun bruger CSS. Snefnuggene falder blidt fra toppen til bunden af skærmen, hvilket giver en hyggelig vintereffekt. Denne metode er perfekt, hvis du ønsker en visuel forbedring uden at påvirke sidens hastighed væsentligt.
Ved hjælp af enkle HTML-elementer placeres snefnuggene manuelt, og CSS sørger for bevægelsen. Det er en ideel løsning til hjemmesider, der skal bevare hurtig indlæsning, selv med visuelle effekter. Husk, at jo flere snefnug du tilføjer, jo større krav stilles der til enhedens ydeevne.
Kode Eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simpel snefald eksempel 1 - Sne på hjemmesiden</title>
<style>
/* Baggrundsindstillinger */
body {
background: linear-gradient(to bottom, #00172D, #000); /* En nattehimmel */
overflow: hidden; /* Ingen rulning */
margin: 0;
height: 100vh;
}
/* Snefnug generelle indstillinger */
.snowflake {
position: absolute;
top: -10px; /* Start lige over skærmen */
left: 0;
color: #fff; /* Snefnug i hvid */
font-size: 1em; /* Mindste snefnug størrelse */
opacity: 0.8; /* Gør snefnuggene lettere gennemsigtige */
animation: fall infinite linear, sway infinite ease-in-out; /* To animationer */
}
/* Snefnug animation: falder ned */
@keyframes fall {
0% {
top: -10px; /* Start uden for skærmen */
}
100% {
top: 100vh; /* Slutter ved bunden af skærmen */
}
}
/* Snefnug animation: svajer sidelæns */
@keyframes sway {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(20px); /* Svaj til højre */
}
}
/* Tilfældige snefnug */
@keyframes sway-negative {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-20px); /* Svaj til venstre */
}
}
/* Dynamiske snefnug med forskellige størrelser, hastigheder og startpositioner */
.snowflake:nth-child(odd) {
font-size: 2em; /* Gør nogle snefnug større */
animation-duration: 8s, 3s; /* Langsom faldhastighed og kortere svaj */
}
.snowflake:nth-child(even) {
font-size: 1.2em;
animation-duration: 6s, 4s; /* Hurtigere fald */
}
.snowflake:nth-child(3n) {
font-size: 1.5em; /* Medium størrelse */
animation: fall 10s linear infinite, sway-negative 5s ease-in-out infinite;
}
/* Placering af snefnug */
.snowflake:nth-child(1) { left: 10%; }
.snowflake:nth-child(2) { left: 30%; }
.snowflake:nth-child(3) { left: 50%; }
.snowflake:nth-child(4) { left: 70%; }
.snowflake:nth-child(5) { left: 90%; }
.snowflake:nth-child(6) { left: 15%; }
.snowflake:nth-child(7) { left: 40%; }
.snowflake:nth-child(8) { left: 65%; }
.snowflake:nth-child(9) { left: 85%; }
.snowflake:nth-child(10) { left: 25%; }
</style>
</head>
<body>
<!-- Generer flere snefnug -->
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
<div class="snowflake">❄</div>
</body>
</html>
Beskrivelse af koden
Denne kode skaber en visuel effekt af snefnug, der falder ned over en mørk baggrund og bevæger sig naturligt fra toppen til bunden af skærmen. Snefnuggene falder med forskellige hastigheder, størrelser og bevægelser, hvilket giver en realistisk snefaldseffekt.
Tilfældig snefald med JavaScript og CSS (eksempel 2)
Tilføj en dynamisk og realistisk sneeffekt til din hjemmeside! Dette eksempel viser, hvordan du kan skabe snefnug, der falder tilfældigt med varierende startpositioner, størrelser og hastigheder. Effekten giver et naturligt og levende udtryk, som skaber vinterstemning på en professionel måde.
Sådan fungerer det:
HTML:
HTML-skelettet er enkelt og fokuserer på integrationen af JavaScript, som dynamisk genererer snefnuggene. Dette gør det nemt at tilpasse eller udvide efter behov.
CSS:
CSS bruges til at definere snefnuggenes udseende og bevægelse. Med en kombination af tilfældige værdier for position (left/top) og en animation som fall
simuleres snefnuggenes blide fald gennem skærmen.
JavaScript:
JavaScript er kernen i denne effekt. Det bruges til at:
- Generere snefnug med tilfældige egenskaber som størrelse, faldhastighed og placering.
- Automatisk fjerne snefnug, når de når bunden af skærmen, for at optimere performance.
Udvidelse:
Ønsker du en endnu mere naturtro effekt? Tilføj en “swing”-animation, der får snefnuggene til at svinge let, mens de falder. Dette skaber en endnu mere realistisk vinteroplevelse.
Kode eksempel:
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tilfældig snefald</title>
<style>
/* Sæt baggrund og skjul indhold uden for skærmen */
body {
background: #282c34; /* Mørkegrå baggrund */
margin: 0; /* Ingen margen */
height: 100vh; /* Fuld højde */
overflow: hidden; /* Skjul snefnug uden for visningen */
}
/* Styling af snefnuggene */
.snowflake {
position: absolute; /* Gør placeringen fri */
color: white; /* Hvid farve til snefnuggene */
animation: fall 5s linear infinite; /* Animation der får dem til at falde */
}
/* Animationen for snefaldet */
@keyframes fall {
from {
transform: translateY(-10px); /* Starter lige over skærmen */
}
to {
transform: translateY(100vh); /* Ender ved bunden af skærmen */
}
}
</style>
</head>
<body>
<script>
// Funktion der skaber et snefnug
const createSnowflake = () => {
const snowflake = document.createElement('div'); // Opret en <div>
snowflake.classList.add('snowflake'); // Tilføj "snowflake"-klassen
snowflake.textContent = '❄'; // Brug snefnugsymbolet som indhold
snowflake.style.left = Math.random() * 100 + 'vw'; // Tilfældig placering på bredden
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // Tilfældig faldtid
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px'; // Tilfældig størrelse
document.body.appendChild(snowflake); // Tilføj snefnug til dokumentet
// Fjern snefnugget, når det er ude af skærmen
setTimeout(() => snowflake.remove(), 5000);
};
// Opret snefnug løbende
setInterval(createSnowflake, 200); // Skab et nyt snefnug hvert 200 ms
</script>
</body>
</html>
Forklaring af kode
- HTML:
- HTML’en er minimal, da snefnuggene genereres dynamisk i JavaScript.
- CSS:
position: absolute;
: Gør det muligt at placere snefnuggene frit på skærmen.animation: fall 5s linear infinite;
: Snefnuggene falder fra toppen til bunden med en varighed af 5 sekunder.
- JavaScript:
Math.random() * 100 + 'vw';
: Genererer en tilfældigleft
-position mellem 0 og 100% af bredden.Math.random() * 3 + 2 + 's';
: Giver hver snefnug en tilfældig animationshastighed mellem 2 og 5 sekunder.setTimeout(() => snowflake.remove(), 5000);
: Fjerner snefnug fra DOM’en efter 5 sekunder for at spare hukommelse.
Skab realistisk snefald med Canvas, JavaScript og CSS (eksempel 3)
Ved at bruge <canvas>
kan vi skabe en realistisk snefaldseffekt, hvor hver snefnug er en partikel med egenskaber som størrelse, hastighed og placering. Canvas giver bedre ydeevne til komplekse animationer.
Vil du have en avanceret sneeffekt på din hjemmeside? Ved at bruge <canvas>
kan du skabe en imponerende og realistisk snefaldseffekt, hvor hver snefnug fungerer som en individuel partikel med egenskaber som størrelse, hastighed og placering. Denne metode giver en jævnere animation og bedre ydeevne, især til komplekse eller mange animationer.
Sådan fungerer det:
HTML:
HTML-strukturen er enkel og består af ét <canvas>
-element. Dette fungerer som “lærredet”, hvor snefnuggene tegnes og animeres. Canvas-elementet giver en fleksibel og effektiv måde at visualisere mange partikler på samtidig.
JavaScript:
JavaScript driver hele effekten ved at:
- Repræsentere hvert snefnug som et objekt med egenskaber som position, størrelse og bevægelseshastighed.
- Tegne snefnuggene på lærredet med Canvas-metoder som
fillRect
ellerarc
. - Kontinuerligt opdatere og animere snefnuggene for at simulere naturligt snefald.
CSS:
CSS kan bruges til at style canvas-elementet og integrere det sømløst med resten af hjemmesidens design.
Fordele ved Canvas til snefnug-animationer:
- Høj ydeevne: Canvas er optimeret til komplekse animationer og mange partikler på samme tid.
- Fleksibilitet: Du kan nemt tilpasse effekten ved at ændre snefnuggenes egenskaber som farve, hastighed og størrelse.
- Professionelt udseende: Canvas giver mulighed for mere realistiske og flydende animationer sammenlignet med traditionelle metoder.
Kode eksempel:
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Snefnug - Javascript, CSS og html</title>
<style>
body {
background: linear-gradient(to bottom, #00172D, #000); /* En nattehimmel */
overflow: hidden; /* Ingen rulning */
margin: 0;
height: 100vh;
}
/* Canvas fylder hele skærmen */
canvas {
display: block;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// Vælg canvas og sæt størrelse
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d'); // Kontekst til at tegne
canvas.width = window.innerWidth; // Tilpas bredde
canvas.height = window.innerHeight; // Tilpas højde
// Snefnug-partikler
let particles = [];
// Klasse der repræsenterer et snefnug
class Particle {
constructor(x, y, radius) {
this.x = x; // Startposition X
this.y = y; // Startposition Y
this.radius = radius; // Snefnuggets størrelse
this.dy = Math.random() * 2 + 1; // Faldhastighed
}
// Opdater snefnuggens position
update() {
this.y += this.dy; // Bevæg snefnug nedad
if (this.y > canvas.height) {
this.y = 0; // Start forfra ved toppen
this.x = Math.random() * canvas.width; // Tilfældig ny X-position
}
this.draw(); // Tegn snefnugget
}
// Tegn snefnugget
draw() {
ctx.beginPath(); // Start en ny sti
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); // Tegn en cirkel
ctx.fillStyle = 'white'; // Hvid farve
ctx.fill(); // Fyld cirklen
ctx.closePath(); // Luk stien
}
}
// Initialiser partiklerne
const init = () => {
particles = []; // Nulstil partikler
for (let i = 0; i < 100; i++) {
particles.push(
new Particle(
Math.random() * canvas.width, // Tilfældig startposition X
Math.random() * canvas.height, // Tilfældig startposition Y
Math.random() * 3 + 1 // Tilfældig størrelse
)
);
}
};
// Animationen
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Ryd canvas
particles.forEach((particle) => particle.update()); // Opdater hver partikel
requestAnimationFrame(animate); // Loop animationen
};
init(); // Initialiser partikler
animate(); // Start animationen
</script>
</body>
</html>
Forklaring af kode
- Canvas:
<canvas>
er et HTML-element, der bruges til at tegne grafik med JavaScript.getContext('2d')
: Giver os mulighed for at tegne 2D-figurer.
- Particle-klassen:
- Repræsenterer et snefnug som et objekt med egenskaber som
x
,y
,radius
ogdy
(hastighed).
- Repræsenterer et snefnug som et objekt med egenskaber som
- Animationen:
requestAnimationFrame(animate)
: Sikrer, at animationen opdateres på en ydeevnevenlig måde.ctx.clearRect(...)
: Rydder canvas før hver frame for at forhindre overlejring.
Interaktiv snefald: Mus-triggeret animation med JavaScript og CSS (eksempel 4)
Tilføj en sjov og engagerende effekt på din hjemmeside med mus-triggeret snefald! Dette eksempel genererer snefnug (❄) i realtid, hver gang brugeren bevæger musen. Den interaktive oplevelse skaber en dynamisk vinterstemning og inviterer besøgende til at udforske din side på en unik måde.
Hvordan virker det?
Dette eksempel bruger en kombination af JavaScript og CSS til at skabe snefnug, der falder fra musens position. Her er en oversigt over, hvordan det fungerer:
HTML:
HTML’en er minimal, da snefnuggene oprettes dynamisk med JavaScript. Dette reducerer behovet for statiske elementer og gør koden mere effektiv.
CSS:
position: absolute;
: Gør det muligt at placere snefnuggene præcist på musens koordinater.@keyframes fall
: Definerer animationen, som får snefnuggene til at falde blidt til bunden af skærmen.pointer-events: none;
: Forhindrer snefnuggene i at påvirke brugerens interaktion med siden.
JavaScript:
mousemove
: Hver gang musen bevæges, genereres et snefnug på musens aktuelle position.setTimeout(..., 4000);
: Snefnuggene fjernes automatisk efter 4 sekunder for at undgå overbelastning og forbedre ydelsen.throttleInterval
: Et tidsinterval på 100 ms mellem snefnug, så effekten forbliver jævn uden at overbelaste ressourcerne.
Kode eksempel:
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sne følger musen - Interaktiv snefald</title>
<style>
body {
background: linear-gradient(to bottom, #00172D, #000); /* En nattehimmel */
overflow: hidden; /* Ingen rulning */
margin: 0;
height: 100vh;
}
.snowflake {
position: absolute;
color: white;
font-size: 1.5rem;
pointer-events: none; /* Forhindrer snefnug i at påvirke musen */
animation: fall 4s linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script>
let lastExecutionTime = 0; // Tidsstempel for sidste afvikling
const throttleInterval = 100; // 100 millisekunder (100 ms)
document.addEventListener('mousemove', (event) => {
const currentTime = Date.now(); // Hent aktuelt tidspunkt
if (currentTime - lastExecutionTime >= throttleInterval) {
lastExecutionTime = currentTime; // Opdater sidste afviklingstid
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.textContent = '❄';
snowflake.style.left = `${event.clientX}px`;
snowflake.style.top = `${event.clientY}px`;
snowflake.style.animationDuration = '4s';
document.body.appendChild(snowflake);
setTimeout(() => snowflake.remove(), 4000); // Fjern efter 4 sekunder
}
});
</script>
</body>
</html>
Fordele ved denne effekt:
- Interaktivitet: Snefnuggene skabes i realtid baseret på brugerens mus, hvilket gør oplevelsen dynamisk og sjov.
- Ressourceoptimeret: Snefnuggene fjernes automatisk efter 4 sekunder, hvilket sikrer, at animationen ikke belaster ressourcerne.
- Fleksibilitet: Design og bevægelse af snefnuggene kan tilpasses for at matche din hjemmesides stil.
- Let implementering: En simpel kombination af HTML, CSS og JavaScript gør det nemt at tilføje denne effekt til enhver hjemmeside.
Sne akkumulerer på elementer: Dynamisk sneeffekt med JavaScript og CSS (eksempel 5)
Skab en fortryllende vintereffekt på din hjemmeside, hvor snefnug akkumulerer ovenpå elementer som billeder og tekst. Denne unikke animation giver illusionen af et voksende snetæppe og bringer liv til statiske elementer.
Hvordan virker det?
Dette eksempel bruger en kombination af HTML, CSS og JavaScript til at skabe en realistisk sneeffekt, hvor sne akkumuleres dynamisk på udvalgte elementer.
HTML:
HTML-strukturen består af målområder som billeder eller tekst, markeret med klassen snow-element
.
- Canvas-elementer genereres dynamisk og placeres over disse målområder for at simulere sneophobning.
- Både billeder (
<img>
) og tekst (<p>
) kan bruges som mål, selvom det visuelle udtryk er bedst på bokse og flade elementer.
CSS:
- Baggrund: En gradueret nattehimmel (sort-blå gradient) skaber en stemningsfuld baggrund.
- Snefnug: Små, hvide, runde elementer (
.snowflake
) med en skyggeeffekt ligner realistiske snefnug. - Positionering: Elementer med klassen
snow-element
harposition: relative
, så canvas-elementerne kan fungere som “sneanker”.
JavaScript:
- Initialisering:
- Alle elementer med klassen
snow-element
får tilknyttet et canvas-element, der bruges til at tegne sneophobningen. - Sne-laget (
snowLayer
) starter ved en standardlinje og opdateres dynamisk, når snefnug lander.
- Alle elementer med klassen
- Snefnugskabelse:
- Funktionen
generateSnowflake()
skaber snefnug med tilfældig størrelse og startposition. - Snefnuggene falder med en varighed mellem 5 og 10 sekunder, simuleret med CSS-animationer.
- Funktionen
- Kollisionsdetektering:
- Når snefnug lander på et målområde (
snow-element
), opdateres sne-laget i canvas. - Sneophobningen visualiseres som en hvid kurve, der vokser proportionalt med snefnuggets størrelse.
- Når snefnug lander på et målområde (
- Kontinuerlig snefnugproduktion:
- Et interval (
setInterval
) genererer nye snefnug hvert 300 ms, hvilket skaber en vedvarende sneeffekt.
- Et interval (
Fordele ved denne sne-effekt:
- Realistisk visuel effekt: Illusionen af akkumulerende sne skaber en troværdig og magisk vinterstemning.
- Interaktivitet: Snefnuggene lander dynamisk på målområder og tilføjer et lag af interaktivitet til statiske elementer.
- Fleksibilitet: Effekten fungerer på alle elementer, som billeder, tekst og bokse, og kan let tilpasses.
- Ressourceoptimeret: Snefnuggene fjernes automatisk efter landing eller når de når bunden af skærmen.
Kode eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamisk Sneophobning</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: linear-gradient(to bottom, #00172D, #000); /* En nattehimmel */
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
position: relative;
}
.snow-element {
position: relative;
display: block;
margin: 20px;
}
.snowflake {
position: absolute;
top: -20px;
width: 5px; /* Snefnuggets standardstørrelse */
height: 5px;
background: white;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<img fetchpriority="high" width="1000" height="500" src="https://kim-tetzlaff.dk/wp-content/uploads/2024/11/snefald-hjemmeside-sne.jpg" alt="snefald hjemmeside sne" srcset="https://kim-tetzlaff.dk/wp-content/uploads/2024/11/snefald-hjemmeside-sne.jpg 1000w, https://kim-tetzlaff.dk/wp-content/uploads/2024/11/snefald-hjemmeside-sne-325x163.jpg 325w, https://kim-tetzlaff.dk/wp-content/uploads/2024/11/snefald-hjemmeside-sne-800x400.jpg 800w" sizes="(max-width: 1000px) 100vw, 1000px" class="snow-element" style="width:200px; height:auto;">
<p class="snow-element" style="text-align: center;">Denne tekst får også sne på sig, men det er bedst på bokse</p>
<script>
const snowElements = document.querySelectorAll('.snow-element');
// Dynamisk tilføjelse af canvas over img-elementerne
snowElements.forEach((element) => {
const rect = element.getBoundingClientRect();
const canvas = document.createElement('canvas');
canvas.width = rect.width;
canvas.height = 80; // 40px over og under startpunktet
canvas.style.position = 'absolute';
canvas.style.top = `${rect.top + window.scrollY - 40}px`; // Placér canvas over elementet
canvas.style.left = `${rect.left + window.scrollX}px`;
canvas.style.pointerEvents = 'none';
// Tilføj canvas til body
document.body.appendChild(canvas);
// Tilføj sne-data
element.snowData = {
canvas: canvas,
ctx: canvas.getContext('2d'),
snowLayer: new Array(canvas.width).fill(0) // Sne-laget starter ved y=40
};
});
// Generer snefnug
const generateSnowflake = () => {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// Tilfældig startposition og størrelse
const size = Math.random() * 6 + 4; // Snefnugstørrelse mellem 4px og 10px
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
document.body.appendChild(snowflake);
// Animer snefnugget
const fallDuration = 5 + Math.random() * 5; // Faldtid mellem 5 og 10 sekunder
const keyframes = [
{ transform: 'translateY(0)' },
{ transform: `translateY(${window.innerHeight}px)` }
];
const animation = snowflake.animate(keyframes, {
duration: fallDuration * 1000,
iterations: 1,
});
// Tjek for landing
const checkCollision = setInterval(() => {
const snowflakeRect = snowflake.getBoundingClientRect();
snowElements.forEach((element) => {
const rect = element.getBoundingClientRect();
const canvasData = element.snowData;
// Tjek om snefnugget lander på elementet
if (
snowflakeRect.left > rect.left &&
snowflakeRect.right < rect.right &&
snowflakeRect.bottom >= rect.top &&
snowflakeRect.bottom <= rect.top + 20
) {
const relativeX = Math.round(snowflakeRect.left - rect.left);
const { ctx, snowLayer, canvas } = canvasData;
// Opdater sne-laget omkring landingspunktet
const increase = size / 2; // Snefnuggets størrelse påvirker væksten
const spread = Math.round(size / 2); // Snefnug spreder sig proportionalt
for (let i = -spread; i <= spread; i++) {
const x = relativeX + i;
if (x >= 0 && x < snowLayer.length) {
snowLayer[x] += increase * (1 - Math.abs(i) / (spread + 1));
}
}
// Tegn sne-laget
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.moveTo(0, 40); // Start ved y=40
snowLayer.forEach((height, x) => {
ctx.lineTo(x, 40 - height); // Tegn sne-laget relativt til startlinjen
});
ctx.lineTo(canvas.width, 40); // Tilbage til y=40
ctx.closePath();
ctx.fill();
// Fjern snefnugget
snowflake.remove();
clearInterval(checkCollision);
}
});
// Fjern snefnugget, hvis det når bunden af skærmen
if (snowflakeRect.bottom >= window.innerHeight) {
snowflake.remove();
clearInterval(checkCollision);
}
}, 50); // Tjek for kollision hvert 50ms
};
// Generer snefnug med jævne mellemrum
setInterval(generateSnowflake, 300);
</script>
</body>
</html>
Sne inde i div som baggrund: Dynamisk sneeffekt til bokse (eksempel 6)
Vil du skabe en unik og stemningsfuld effekt på din hjemmeside? Med denne sneeffekt kan du tilføje sne, der falder som baggrund i dine div-bokse. Sneen forbliver inden for boksen og tilpasses dens størrelse, mens indhold som tekst eller billeder stadig er tydeligt synligt.
Hvordan virker det?
Denne sneeffekt kombinerer HTML, CSS og JavaScript for at skabe en baggrundseffekt, hvor snefnug genereres og falder inde i specifikke div-bokse markeret med klassen sneboksen
.
HTML:
- Div-bokse (
<div>
) fungerer som sneområder og er markeret med klassensneboksen
. - Indhold i boksen, som tekst eller billeder, placeres i et underliggende element (
.content
), der sikrer, at snefnuggene vises bagved.
CSS:
- Positionering: Boksen (
.sneboksen
) harposition: relative
, så snefnuggene placeres korrekt. - Snefnug: Små, hvide cirkler (
.snowflake
) simulerer snefnug og falder bag bokselementets indhold. - Grænser:
overflow: hidden
forhindrer snefnuggene i at strække sig uden for boksen, hvilket skaber et rent udseende.
JavaScript:
- Snefnugskabelse:
- Funktionen
generateSnowflakeInBox()
genererer snefnug med tilfældig størrelse og startposition inden for boksen. - Snefnuggene animeres lodret fra toppen af boksen og fjernes automatisk, når de når bunden.
- Funktionen
- Sneproduktion:
- Et interval (
setInterval
) genererer nye snefnug hvert 300 ms, hvilket skaber en kontinuerlig sneeffekt.
- Et interval (
- Responsiv effekt:
- Snefnuggene tilpasses automatisk boksens dimensioner, hvilket gør effekten velegnet til både små og store bokse.
Kode eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sne i bokse, med Indhold i Bokse</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #00172D, #000);
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.sneboksen {
position: relative; /* For at placere snefnug korrekt */
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid white;
overflow: hidden;
margin: 20px;
}
.sneboksen .content {
position: relative; /* Indhold skal ligge over snefnuggene */
z-index: 1;
text-align: center;
padding: 20px;
}
.snowflake {
position: absolute;
background: white;
width: 5px;
height: 5px;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
z-index: -1; /* Snefnuggene placeres bag indholdet */
}
</style>
</head>
<body>
<div class="sneboksen">
<div class="content">
<h3 style="background:#000; padding:5px;">Velkommen til Sneboksen</h3>
<p>Her falder sneen, men teksten er stadig synlig!</p>
</div>
</div>
<div class="sneboksen"></div>
<script>
const snowboxes = document.querySelectorAll('.sneboksen');
// Funktion til at generere snefnug i en specifik sneboks
function generateSnowflakeInBox(box) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// Bestem en tilfældig startposition og størrelse indenfor boksen
const size = Math.random() * 6 + 4; // Størrelse mellem 4px og 10px
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
const boxRect = box.getBoundingClientRect();
const leftPosition = Math.random() * boxRect.width;
snowflake.style.left = `${leftPosition}px`;
snowflake.style.top = `-${size}px`; // Start lige over boksen
// Tilføj snefnugget til sneboksen
box.appendChild(snowflake);
// Få snefnugget til at falde
const fallDuration = 5 + Math.random() * 5; // Faldtid mellem 5 og 10 sekunder
const keyframes = [
{ transform: 'translateY(0)' },
{ transform: `translateY(${boxRect.height + size}px)` }
];
const animation = snowflake.animate(keyframes, {
duration: fallDuration * 1000,
iterations: 1,
});
// Fjern snefnugget, når animationen er færdig
animation.onfinish = () => snowflake.remove();
}
// Generer sne med jævne mellemrum for hver sneboks
snowboxes.forEach((box) => {
setInterval(() => generateSnowflakeInBox(box), 300); // Nyt snefnug hvert 300ms
});
</script>
</body>
</html>
Sneeffekt, der reagerer på musens placering (eksempel 7)
Tilføj en interaktiv sneeffekt til din hjemmeside, hvor snefnuggene bevæger sig væk fra musens position. Når musen er i højre side af skærmen, flytter snefnuggene sig mod venstre, og når musen er i venstre side, flytter snefnuggene sig mod højre. Denne subtile og dynamiske effekt giver din hjemmeside et livligt og engagerende vinterpræg.
Hvordan virker det?
Effekten skabes ved hjælp af JavaScript og CSS, som arbejder sammen for at animere snefnug i realtid, mens de reagerer på brugerens mus.
1. Musens position:
- Musens vandrette position (
mouseX
) overvåges løbende viamousemove
-begivenheden. - Snefnuggene bevæger sig væk fra musens position i et naturligt mønster:
- Hvis musen er i højre side, driver snefnuggene let mod venstre.
- Hvis musen er i venstre side, flytter snefnuggene sig mod højre.
2. Snefnug-animation:
- Snefnuggene falder lodret nedad med en konstant hastighed.
- Horisontalt påvirkes snefnuggene af musens position, hvilket skaber en elegant bevægelse væk fra musen.
3. Begrænsning af snefnug:
- Der oprettes maksimalt 100 snefnug ad gangen.
- Snefnuggene fjernes automatisk fra DOM’en, når de er uden for skærmens synlige område.
4. Sneproduktion:
- Nye snefnug genereres hvert 100 ms, hvilket giver en konstant strøm af sne, der sikrer en jævn animation.
Kode eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snestorm</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: linear-gradient(to bottom, #00172D, #000);
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.snowflake {
position: absolute;
background: white;
width: 5px;
height: 5px;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<script>
const snowflakes = [];
const maxSnowflakes = 100; // Antal snefnug på én gang
let mouseX = window.innerWidth / 2; // Startposition for musen i midten
// Lyt til musens bevægelse
window.addEventListener('mousemove', (event) => {
mouseX = event.clientX;
});
// Funktion til at generere snefnug
function createSnowflake() {
if (snowflakes.length >= maxSnowflakes) return;
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// Tilfældig startposition (vandret)
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
snowflake.style.top = `-${Math.random() * 50}px`; // Starter lige over skærmen
// Tilfældig størrelse
const size = Math.random() * 6 + 4; // Mellem 4px og 10px
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
// Tilføj snefnugget til body
document.body.appendChild(snowflake);
snowflakes.push(snowflake);
// Animer snefnugget
animateSnowflake(snowflake, size);
}
// Funktion til at animere snefnugget
function animateSnowflake(snowflake, size) {
const fallDuration = 5 + Math.random() * 5; // Varighed mellem 5 og 10 sekunder
const moveSnowflake = () => {
const rect = snowflake.getBoundingClientRect();
const snowflakeX = rect.left;
const snowflakeY = rect.top;
// Hvis snefnugget er uden for skærmen, fjern det
if (snowflakeY > window.innerHeight || snowflakeX < 0 || snowflakeX > window.innerWidth) {
snowflake.remove();
snowflakes.splice(snowflakes.indexOf(snowflake), 1);
return;
}
// Beregn horisontal bevægelse baseret på musens position
const horizontalSpeed = ((window.innerWidth / 2 - mouseX) / window.innerWidth) * size * 0.5;
// Flyt snefnugget
snowflake.style.top = `${snowflakeY + size * 0.5}px`; // Lodret bevægelse
snowflake.style.left = `${snowflakeX + horizontalSpeed}px`; // Horisontal bevægelse
requestAnimationFrame(moveSnowflake);
};
moveSnowflake();
}
// Generer snefnug løbende
setInterval(createSnowflake, 100);
</script>
</body>
</html>
Sne falder ned over siden og danner snedriver i bunden (eksempel 8)
Tilføj en interaktiv sneeffekt til din hjemmeside, hvor snefnug ikke kun falder og reagerer på musens position, men også samler sig i bunden af skærmen som snedriver. Denne effekt kombinerer animation og canvas-tegning for at skabe en visuelt imponerende vinterstemning.
Hvordan virker det?
Denne sneeffekt udnytter HTML, CSS, JavaScript og canvas til at skabe en realistisk oplevelse, hvor snefnug interagerer med musens placering og ophober sig i bunden af skærmen.
1. Snefnuggene reagerer på musens position:
- Musens vandrette position (
mouseX
) overvåges viamousemove
. - Snefnuggene bevæger sig væk fra musens position:
- Hvis musen er i højre side, driver snefnuggene mod venstre.
- Hvis musen er i venstre side, bevæger snefnuggene sig mod højre.
2. Snefnug-animation:
- Snefnuggene genereres med tilfældige startpositioner og størrelser og falder lodret mod bunden.
- Horisontal bevægelse beregnes dynamisk baseret på musens placering.
3. Snedriver dannes i bunden:
- Når snefnuggene når bunden af skærmen, bidrager de til opbygningen af snebanken.
- Canvas bruges til at tegne snebanken som en glat, hvid kurve, der visualiserer den akkumulerede sne.
4. Performance-optimering:
- Snefnuggene fjernes fra DOM’en, når de når bunden, for at sikre høj ydeevne.
- Canvas opdateres kun, når snebanken ændres, hvilket reducerer unødige beregninger.
Kode eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snestorm med Snedriver</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: linear-gradient(to bottom, #00172D, #000);
overflow: hidden;
height: 100vh;
position: relative;
}
.snowflake {
position: absolute;
background: white;
width: 5px;
height: 5px;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
canvas {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="snowCanvas"></canvas>
<script>
const snowflakes = [];
const maxSnowflakes = 100; // Antal snefnug på én gang
const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');
let mouseX = window.innerWidth / 2;
// Juster canvas til vinduesstørrelsen
canvas.width = window.innerWidth;
canvas.height = 200;
// Sneophobning-data
const snowBank = new Array(canvas.width).fill(0);
// Lyt til musens bevægelse
window.addEventListener('mousemove', (event) => {
mouseX = event.clientX;
});
// Funktion til at generere snefnug
function createSnowflake() {
if (snowflakes.length >= maxSnowflakes) return;
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// Tilfældig startposition (vandret)
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
snowflake.style.top = `-${Math.random() * 50}px`; // Starter lige over skærmen
// Tilfældig størrelse
const size = Math.random() * 6 + 4; // Mellem 4px og 10px
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
// Tilføj snefnugget til body
document.body.appendChild(snowflake);
snowflakes.push({ element: snowflake, size });
animateSnowflake(snowflake, size);
}
// Funktion til at animere snefnugget
function animateSnowflake(snowflake, size) {
const fallDuration = 5 + Math.random() * 5; // Varighed mellem 5 og 10 sekunder
const moveSnowflake = () => {
const rect = snowflake.getBoundingClientRect();
const snowflakeX = rect.left;
const snowflakeY = rect.top;
// Hvis snefnugget når bunden af hele skærmen
if (snowflakeY >= window.innerHeight) {
accumulateSnow(snowflakeX, size); // Akkumuler sne
snowflake.remove(); // Fjern snefnugget
snowflakes.splice(snowflakes.indexOf(snowflake), 1);
return;
}
// Beregn horisontal bevægelse baseret på musens position
const horizontalSpeed = ((window.innerWidth / 2 - mouseX) / window.innerWidth) * size * 0.5;
// Flyt snefnugget
snowflake.style.top = `${snowflakeY + size * 0.5}px`; // Lodret bevægelse
snowflake.style.left = `${snowflakeX + horizontalSpeed}px`; // Horisontal bevægelse
requestAnimationFrame(moveSnowflake);
};
moveSnowflake();
}
// Akkumuler sne i bunden
function accumulateSnow(x, size) {
const canvasX = Math.floor(x);
const spread = Math.floor(size / 2);
// Opdater snebanken
for (let i = -spread; i <= spread; i++) {
const index = canvasX + i;
if (index >= 0 && index < snowBank.length) {
snowBank[index] += size * (1 - Math.abs(i) / (spread + 1));
}
}
// Tegn snebanken på canvas
drawSnowBank();
}
function drawSnowBank() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.moveTo(0, canvas.height);
for (let x = 0; x < snowBank.length; x++) {
const y = canvas.height - snowBank[x];
ctx.lineTo(x, y);
}
ctx.lineTo(canvas.width, canvas.height);
ctx.closePath();
ctx.fill();
}
// Generer snefnug løbende
setInterval(createSnowflake, 100);
// Juster canvas ved vinduesændringer
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
snowBank.length = canvas.width;
});
</script>
</body>
</html>
Realistisk sne, med effekter fra musen, sne eksplosioner ved klik
Denne sneeffekt danner meget realistisk sne, med forskellige dybder, størrelser, hastigheder. Og ydermere skubbes sneen væk med musen/fingertouch. Når man klikker, kommer der en lille eksplosion af sne ud fra hvor man klikker. Sjov effekt.
Hvad gør koden?
- Sne-animation
Koden genererer op til 300 snefnug, der falder realistisk ved hjælp af tilfældige hastigheder, vinkler og størrelser. Dette skaber en naturlig vintereffekt. - Interaktivitet med mus og touch
- Brugeren kan påvirke snefnuggene ved at bevæge musen eller trykke på skærmen. Dette tilføjer en “vind-effekt,” hvor snefnug skubber sig væk fra musens position.
- Klik eller touch skaber en sneeksplosion, hvor flere snefnug pludselig genereres ved interaktionspunktet.
- Responsivt design
Sneanimationen tilpasses automatisk til skærmstørrelsen, så den fungerer optimalt på både desktop og mobile enheder.
Hvad sker der og hvad er muligt
Snefnug-logik
- Hvert snefnug er et objekt, der opdateres og tegnes på canvas i hver frame. Dette gør animationen både glidende og let at tilpasse.
- Snefnuggene har egenskaber som størrelse, hastighed og gennemsigtighed, hvilket gør effekten visuelt interessant.
Interaktionshåndtering
- Musens eller touchens position opdateres i realtid, hvilket bruges til at beregne afstanden mellem snefnug og interaktionspunktet. Dette skaber en realistisk bevægelse i sneen.
Sneeksplosion
- Når brugeren klikker eller trykker på skærmen, genereres en midlertidig gruppe snefnug, som spredes ud fra interaktionspunktet for at simulere en sneeksplosion.
Ydelsesoptimering
- Snefnuggene genbruges og flyttes tilbage til toppen af skærmen, når de bevæger sig uden for synsfeltet. Dette holder animationen effektiv.
Kode eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Realistisk Sne med Effekter</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #00172D, #000);
height: 100vh;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="snowCanvas"></canvas>
<script>
const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');
const audio = document.getElementById('snowAudio');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const snowflakes = [];
const maxSnowflakes = 300;
let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;
// Mus eller touch bevægelse
function updateMousePosition(x, y) {
mouseX = x;
mouseY = y;
}
// Klik eller touch for sneeksplosion
function triggerSnowExplosion(x, y) {
createSnowExplosion(x, y);
}
// Event listeners til mus
window.addEventListener('mousemove', (event) => {
updateMousePosition(event.clientX, event.clientY);
});
window.addEventListener('click', (event) => {
triggerSnowExplosion(event.clientX, event.clientY);
});
// Event listeners til touch
window.addEventListener('touchmove', (event) => {
const touch = event.touches[0];
updateMousePosition(touch.clientX, touch.clientY);
});
window.addEventListener('touchstart', (event) => {
const touch = event.touches[0];
triggerSnowExplosion(touch.clientX, touch.clientY);
});
class Snowflake {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * -canvas.height;
this.radius = Math.random() * 2.5 + 0.5;
this.speed = Math.random() * 1.5 + 0.5;
this.angle = Math.random() * Math.PI * 2;
this.wind = 0;
this.opacity = Math.min(1, this.radius / 3);
}
update() {
const dx = this.x - mouseX;
const dy = this.y - mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
const windForce = Math.max(0, 200 - distance) / 200;
this.wind = windForce * (dx > 0 ? 1 : -1);
this.x += Math.sin(this.angle) + this.wind * 2;
this.y += this.speed;
this.angle += 0.01;
if (this.y > canvas.height || this.x < 0 || this.x > canvas.width) {
this.x = Math.random() * canvas.width;
this.y = -this.radius;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.shadowBlur = this.radius * 2;
ctx.shadowColor = 'white';
ctx.fill();
ctx.closePath();
}
}
function createSnowflakes() {
for (let i = 0; i < maxSnowflakes; i++) {
snowflakes.push(new Snowflake());
}
}
function createSnowExplosion(x, y) {
const explosionSize = 50;
for (let i = 0; i < explosionSize; i++) {
const tempSnowflake = new Snowflake();
tempSnowflake.x = x;
tempSnowflake.y = y;
tempSnowflake.speed = Math.random() * 3 + 1;
tempSnowflake.angle = Math.random() * Math.PI * 2;
snowflakes.push(tempSnowflake);
setTimeout(() => {
snowflakes.splice(snowflakes.indexOf(tempSnowflake), 1);
}, 2000);
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snowflakes.forEach((snowflake) => {
snowflake.update();
snowflake.draw();
});
requestAnimationFrame(animate);
}
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
window.addEventListener('load', () => {
audio.volume = 0.1;
audio.play();
});
createSnowflakes();
animate();
</script>
</body>
</html>
Tilpasningstips
- Snefnug-mængde:
JustermaxSnowflakes
for at øge eller mindske antallet af snefnug. - Farve og baggrund:
Tilpas baggrundsfarven eller snefnuggens udseende for at passe til dit design. - Interaktivitet:
ÆndrexplosionSize
icreateSnowExplosion
for at justere intensiteten af sneeksplosionen.
De mest realistiske snefnug med vindpåvirkning fra musen (eksempel 10)
Oplev en smuk og realistisk sneeffekt, hvor snefnug falder ned over skærmen med forskellige størrelser, synlighed og vindpåvirkning. Denne interaktive sneanimation simulerer ikke kun sneens fald, men tilføjer også en dynamisk vindpåvirkning, der reagerer på musebevægelser, hvilket skaber et naturligt pust i sneen.
Hvordan virker det?
Denne sneeffekt er designet med HTML, CSS og JavaScript og bruger canvas til at skabe en jævn og realistisk animation. Her er, hvad der sker:
1. Realistiske snefnug:
- Snefnuggene er små cirkler (
arc
), der er delvist gennemsigtige for at efterligne sneens naturlige udseende. - Mindre snefnug er mindre synlige for at skabe en realistisk dybdeeffekt.
- Skygger tilføjes for at give snefnuggene et blødt og æstetisk udseende.
2. Vindpåvirkning fra musen:
- Når musen bevæger sig, påvirker den snefnuggene inden for en radius af 150px.
- Snefnuggene skubbes væk fra musens position, hvilket skaber en naturlig vind-effekt.
3. Sneens fald og genstart:
- Snefnuggene bevæger sig lodret nedad med varierende hastigheder og vinkler.
- Når snefnuggene når bunden eller forlader skærmen, genstartes de fra toppen med tilfældige egenskaber.
4. Animation og performance:
- Animationen drives af
requestAnimationFrame
, der sikrer jævn og ressourceoptimeret grafik. - Canvas-området justeres automatisk, hvis vinduets størrelse ændres, hvilket gør animationen responsiv.
Kode eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Realistisk Sne</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #00172D, #000); /* Nattehimmel */
height: 100vh;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="snowCanvas"></canvas>
<script>
const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');
// Juster canvas til vinduesstørrelsen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Variabler til snefnug
const snowflakes = [];
const maxSnowflakes = 300; // Flere snefnug for en tættere sneeffekt
let mouseX = canvas.width / 2; // Startposition for musen
let mouseY = canvas.height / 2;
// Lyt til musens bevægelse
window.addEventListener('mousemove', (event) => {
mouseX = event.clientX;
mouseY = event.clientY;
});
// Snefnug-objekt
class Snowflake {
constructor() {
this.x = Math.random() * canvas.width; // Startposition x
this.y = Math.random() * -canvas.height; // Startposition y (over skærmen)
this.radius = Math.random() * 2.5 + 0.5; // Mindre radius (0.5px til 3px)
this.speed = Math.random() * 1.5 + 0.5; // Faldhastighed
this.angle = Math.random() * Math.PI * 2; // Rotation
this.wind = 0; // Vind (justeres af musen)
this.opacity = Math.min(1, this.radius / 3); // Mindre synlighed for små snefnug
}
update() {
// Beregn vindens påvirkning baseret på musens nærhed
const dx = this.x - mouseX;
const dy = this.y - mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
const windForce = Math.max(0, 200 - distance) / 200; // Vindens effekt aftager med afstand
this.wind = windForce * (dx > 0 ? 1 : -1); // Skub sneen modsat musen
// Opdater position
this.x += Math.sin(this.angle) + this.wind * 2;
this.y += this.speed;
// Rotation af snefnug
this.angle += 0.01;
// Genstart snefnug, hvis det forlader skærmen
if (this.y > canvas.height || this.x < 0 || this.x > canvas.width) {
this.x = Math.random() * canvas.width;
this.y = -this.radius; // Genstart fra toppen
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.shadowBlur = this.radius * 2;
ctx.shadowColor = 'white';
ctx.fill();
ctx.closePath();
}
}
// Funktion til at initialisere snefnug
function createSnowflakes() {
for (let i = 0; i < maxSnowflakes; i++) {
snowflakes.push(new Snowflake());
}
}
// Animation af sne
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Ryd canvas
snowflakes.forEach((snowflake) => {
snowflake.update();
snowflake.draw();
});
requestAnimationFrame(animate);
}
// Juster canvas, når vinduesstørrelsen ændres
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Start animationen
createSnowflakes();
animate();
</script>
</body>
</html>