Sne på hjemmeside – Guide til at lave snefnug på din hjemmeside

December nærmer sig, og stemningen skal sættes. Snefnug på din hjemmeside er lige sagen i julemåneden.

snefald hjemmeside sne
Skrevet af:
Oprettet:
Opdateret:
Læsetid: 32 min.

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.

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)

eksempel1 sne paa hjemmeside

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.

<!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)

eksempel2 sne paa hjemmeside

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.

<!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

  1. HTML:
    • HTML’en er minimal, da snefnuggene genereres dynamisk i JavaScript.
  2. 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.
  3. JavaScript:
    • Math.random() * 100 + 'vw';: Genererer en tilfældig left-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)

eksempel3 sne paa hjemmeside

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 eller arc.
  • 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.
<!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

  1. Canvas:
    • <canvas> er et HTML-element, der bruges til at tegne grafik med JavaScript.
    • getContext('2d'): Giver os mulighed for at tegne 2D-figurer.
  2. Particle-klassen:
    • Repræsenterer et snefnug som et objekt med egenskaber som x, y, radius og dy (hastighed).
  3. 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)

eksempel4 sne paa hjemmeside

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.
<!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)

eksempel5 sne paa hjemmeside

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 har position: relative, så canvas-elementerne kan fungere som “sneanker”.

JavaScript:

  1. 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.
  2. 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.
  3. 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.
  4. Kontinuerlig snefnugproduktion:
    • Et interval (setInterval) genererer nye snefnug hvert 300 ms, hvilket skaber en vedvarende sneeffekt.

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.

<!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)

eksempel6 sne paa hjemmeside

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 klassen sneboksen.
  • Indhold i boksen, som tekst eller billeder, placeres i et underliggende element (.content), der sikrer, at snefnuggene vises bagved.

CSS:

  • Positionering: Boksen (.sneboksen) har position: 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:

  1. 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.
  2. Sneproduktion:
    • Et interval (setInterval) genererer nye snefnug hvert 300 ms, hvilket skaber en kontinuerlig sneeffekt.
  3. Responsiv effekt:
    • Snefnuggene tilpasses automatisk boksens dimensioner, hvilket gør effekten velegnet til både små og store bokse.

<!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)

eksempel7 sne paa hjemmeside

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 via mousemove-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.

<!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)

eksempel8 sne paa hjemmeside

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 via mousemove.
  • 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.
<!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

eksempel10 sne paa hjemmeside

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?

  1. 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.
  2. 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.
  3. 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.
<!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:
    Juster maxSnowflakes for at øge eller mindske antallet af snefnug.
  • Farve og baggrund:
    Tilpas baggrundsfarven eller snefnuggens udseende for at passe til dit design.
  • Interaktivitet:
    Ændr explosionSize i createSnowExplosion for at justere intensiteten af sneeksplosionen.

De mest realistiske snefnug med vindpåvirkning fra musen (eksempel 10)

eksempel10 sne paa hjemmeside

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.
<!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>
Kim Tetzlaff

Jeg har arbejdet som webudvikler siden 1995 med fokus på hastighedsoptimering og teknisk SEO - især på WordPress, WooCommerce og skræddersyede løsninger. Jeg hjælper virksomheder med at gøre deres websites teknisk stærke, hurtigere, mere stabile og mere synlige i Google. Og så laver jeg også nye hjemmesider til kunder.

LinkedIn Facebook YouTube

Ekspertise områder:

Hastighedsoptimering SEO WordPress Hjemmeside

Opdage Mere

Udforsk relateret indhold og nyeste samtaler

WordPress SEO plugins

WordPress SEO plugins

Der er egentlig ikke den store forskel på at udføre SEO på en Wordpress løsning,…

Kim Tetzlaff
Ertugrul Gultekin

Hej Kim. Jeg er gået i gang med at seo optimere min køreskole hjemmeside. Jeg synes LS er lidt langsom hvilket jeg også kan se,…

Læs mere
Kim Tetzlaff
Kim Tetzlaff

Hej Albert, Ja, jeg har samarbejdet med Madbanditten i mere end 10 år nu, og vi samarbejder stadig den dag i dag. Dette er som…

Læs mere
Kim Tetzlaff
Alblert

Hej Kim. Spændende case at læse om. Jeg har lige et enkelt spørgsmål - der står du har samarbejdet med Madbanditten.dk i mere end 10…

Læs mere
Få en gratis hastighedsanalyse af din hjemmeside - Affinion.dk

[…] og sikre, at den leverer den bedste oplevelse til dine besøgende, bør du overveje at få en gratis hastighedsanalyse af din […]

Læs mere
Disse 3 Fejl Begår De Fleste Webshop Ejere Når De Skal Optimere Deres Webshop – Start-Virksomhed.dk

[…] Optimering af webshop er en kontinuerlig proces, der kræver opmærksomhed på detaljer og en forståelse for, hvad der driver kundeadfærd. Ved at undgå de…

Læs mere

Kommentarer

Vær den første til at kommentere!

Skriv en kommentar

Din email adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Skriv en kommentar

kim tetzlaff.dk logo

Målet er kvalitet

Det er mit mål at levere kvalitetsløsninger med høj fokus på hastighed og teknisk seo. Uanset om der er tale om små eller store løsninger, vil fokus altid være på hastighed og teknisk seo.

PRODUKTER

Optimering af hastighed Teknisk SEO Wordpress hjemmeside Sikkerhed & backup Hjemmeside design Hastighedsanalyse

OM KIM TETZLAFF

Programmør og nørd med mere end 25 års erfaring i hastighedsoptimering og webudvikling. Altid med fokus på hurtige og SEO venlige webløsninger.

KONTAKT

Løvstikkevej 59 1tv
2300 København S
Tel.: 20949918
Mail: kim@kim-tetzlaff.dk

FOKUS

Hurtigere hjemmesider med fokus på teknisk SEO er den bedste start på nettet – Kan næsten ikke blive bedre