Effetto neve sul sito (con Javascript)

Questo simpatico script Javascript genera il più classico degli effetti per Natale, cioè una bella nevicata sulla nostra pagina web. Questo effetto non solo aggiunge un tocco festoso al sito, ma può anche migliorare l’esperienza utente durante il periodo natalizio. Da un punto di vista tecnico, lo script è piuttosto leggero (pesa pochi Kb), non ha alcuna dipendenza (è un codice in puro Javascript) ed utilizza una semplice GIF trasparente per rappresentare il fiocco di neve.

Come implementare l’effetto neve

Dopo aver incluso il Javascript, noterete che, al caricamento della pagina web, lo schermo inizierà a riempirsi di fiocchi di neve “svolazzanti”. Il volume della nevicata virtuale può essere facilmente modificato intervenendo sulla variabile snow_no che trovate nelle prime linee di codice:

let snow_no = 15;

Ovviamente, maggiore è il valore e tanto più abbondanti saranno le precipitazioni nevose sul nostro sito web 🙂

Esempio completo di codice

Di seguito è riportato un esempio completo di codice per implementare l’effetto neve. Potete copiare e incollare il codice nel vostro progetto per iniziare subito a decorare il vostro sito:

// Configurazione delle variabili
let snow_no = 15; // Numero di fiocchi di neve
let snowflakes = [];

// Funzione per generare i fiocchi di neve
function createSnowflakes() {
    for (let i = 0; i < snow_no; i++) {
        let snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.style.position = 'absolute';
        snowflake.style.width = '10px';
        snowflake.style.height = '10px';
        snowflake.style.backgroundImage = 'url("path_to_your_snowflake_image.png")';
        snowflake.style.opacity = Math.random();
        snowflake.style.left = Math.random() * window.innerWidth + 'px';
        snowflake.style.animationDuration = (Math.random() * 3 + 2) + 's'; // Durata di caduta
        document.body.appendChild(snowflake);
        snowflakes.push(snowflake);
    }
}

// Chiamata alla funzione per generare i fiocchi di neve
createSnowflakes();

// Anima i fiocchi di neve
setInterval(() => {
    snowflakes.forEach(snowflake => {
        let top = parseFloat(snowflake.style.top || 0);
        if (top < window.innerHeight) {
            snowflake.style.top = (top + 1) + 'px';
        } else {
            snowflake.style.top = '0px'; // Ripristina il fiocco di neve
        }
    });
}, 100);

Personalizzate il path_to_your_snowflake_image.png con il percorso della vostra GIF di fiocco di neve personalizzato per un effetto unico.

Considerazioni finali

Da un punto di vista visivo, il risultato è decisamente simpatico (anche se forse l’idea è un po’ inflazionata). Tuttavia, può essere utilizzato con successo per decorare pagine web dedicate al Natale o, più in generale, alle festività di fine anno. Quando implementate questo effetto, considerate l’ottimizzazione delle prestazioni e assicuratevi che non influisca negativamente sulla velocità di caricamento del sito.

In conclusione, sperimentare con effetti visivi come questo può non solo migliorare l’estetica del vostro sito, ma anche coinvolgere maggiormente gli utenti, rendendo la loro visita un’esperienza memorabile.