Zăpadă JavaScript

Iată cum poți adăuga o animație cu zăpadă cu JavaScript pe site-ul tău atunci cand te afli in sezonul rece :)

1. Constante de configurare

Să configurăm niște variabile pentru a stoca informații despre aspectul animației noastre cu zăpadă.

const NUMBER_OF_SNOWFLAKES = 300;

const MAX_SNOWFLAKE_SIZE = 5;

const MAX_SNOWFLAKE_SPEED = 2;

const SNOWFLAKE_COLOUR = '#ddd';

const snowflakes = [];

De asemenea, vom crea un array gol numit snowflakes care va ține evidența tuturor fulgilor de zăpadă de pe pagină.

2. Creați o pânză

Toți fulgii de zăpadă vor fi desenați pe un element de tip pânză, așa că haideți să îl creăm și să îl plasăm în documentul curent.

const canvas = document.createElement('canvas');

canvas.style.position = 'absolute';

canvas.style.pointerEvents = 'none';

canvas.style.top = '0px';

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

Dimensionăm pânza pentru a se potrivi întregii ferestre și setăm pointer-eventproprietatea CSS none astfel încât să facă pânza invizibilă și utilizatorul să poată da clic în continuare pe lucrurile din spatele ei.

În cele din urmă, vom obține contextul pânzei 2D, pe care îl putem folosi pentru a desena fulgii de zăpadă.

Dar mai întâi, avem nevoie de o funcție care să genereze un fulg de zăpadă.

 3. Creați un fulg de zăpadă

const createSnowflake = () => ({

    x: Math.random() * canvas.width,

    y: Math.random() * canvas.height,

    radius: Math.floor(Math.random() * MAX_SNOWFLAKE_SIZE) + 1,

    color: SNOWFLAKE_COLOUR,

    speed: Math.random() * MAX_SNOWFLAKE_SPEED + 1,

    sway: Math.random() - 0.5

});

Această funcție va crea și va returna un obiect fulg de zăpadă care se află într-o poziție aleatorie pe pagină. De asemenea, vom crea o dimensiune aleatorie (rază) pentru acesta, îi vom seta culoarea la constanta definită și îi vom da o viteză aleatorie cu o valoare minimă.

În a doua parte a tutorialului, introducem o sway proprietate pentru a muta fulgul de zăpadă la stânga sau la dreapta pe măsură ce cade pe pagină.

Acum avem nevoie de o modalitate de a desena fulgul de zăpadă pe pânză.

4. Desenează un fulg de zăpadă

const drawSnowflake = snowflake => {

    ctx.beginPath();

    ctx.arc(snowflake.x, snowflake.y, snowflake.radius, 0, Math.PI * 2);

    ctx.fillStyle = snowflake.color;

    ctx.fill();

    ctx.closePath();

};

Vom desena un cerc cu o rază specificată de proprietatea obiectului fulg de zăpadă transmis.

5. Actualizați un fulg de zăpadă

const updateSnowflake = snowflake => {

    snowflake.y += snowflake.speed;

    snowflake.x += snowflake.sway;

    if (snowflake.y > canvas.height) {

        Object.assign(snowflake, createSnowflake());

    }

};

Aici, vom lua unul dintre obiectele noastre fulg de zăpadă și îi vom actualiza pozițiile x și y pe pagină. Dacă ajunge la sfârșitul paginii, vom reatribui referința fulgului de zăpadă unui nou obiect fulg de zăpadă.

6. Animarea fulgilor de zăpadă

const animate = () => {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    snowflakes.forEach(snowflake => {

        updateSnowflake(snowflake);

        drawSnowflake(snowflake);

    });

    requestAnimationFrame(animate);

};

Funcția animate șterge pânza curentă, apoi parcurge matricea noastră de fulgi de zăpadă și le actualizează poziția, apoi îi desenează pe pânză.

Putem crea o animație foarte fluidă apelând pur și simplu această funcție în mod repetat, transmițând-o către requestAnimationFrame.

Desigur, nu am pus snowflakes încă niciun obiect fulg de zăpadă în matricea noastră, așa că haideți să le populăm acum și să începem animația apelând funcția animate .

for (let i = 0; i < NUMBER_OF_SNOWFLAKES; i++) {

    snowflakes.push(createSnowflake());

}

animate();

Ar trebui să avem acum o animație cu ninsoare complet funcțională pe pagina noastră!

7. Adăugarea de ascultători de evenimente

Dacă încerci să redimensionezi fereastra browserului în acest moment sau să derulezi în jos pentru a vedea mai mult conținut (dacă există pe pagina ta), vei observa că efectul de ninsoare este fixat în partea de sus a paginii și nu se redimensionează pentru a se potrivi ferestrei browserului.

Să încheiem frumoasa noastră animație cu ninsoare cu câțiva ascultători de evenimente pentru a gestiona acest lucru.

window.addEventListener('resize', () => {

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;

});

window.addEventListener('scroll', () => {

    canvas.style.top = `${window.scrollY}px`;

});

Deoarece am scris totul în JavaScript, fără a fi nevoie de HTML/CSS suplimentar, putem pur și simplu copia codul și îl putem plasa pe orice site.

Concluzie

Este doar puțină distracție și nu ceva ce ar trebui să adăugați pe site-ul dvs neaparat.