Se hai già definito la struttura del sito web e progettato il layout con una certa cura, puoi valutare l’idea di aggiungere elementi in grado di rendere il tuo sito più scenografico e accattivante. Sto parlando di effetti e animazioni per siti. L’animazione del sito web può arricchire esteticamente (ma anche funzionalmente) una pagina o un contenuto.
Però, per aggiungere un’animazione moderna e dal forte impatto, è necessario ricorrere a qualche strumento supplementare che aiuti a raggiungere l’obiettivo. Vediamo allora il modo più semplice e veloce per aggiungere animazioni nei siti web.
Tool per le animazioni del sito web
Parliamo di Lottie Animations, una vasta libreria di animazioni già pronte all’uso e con ampia possibilità di personalizzazione. Si tratta di una delle migliori risorse gratuite per aggiungere un’animazione sul sito web.
Una delle cose più difficili da realizzare per un web designer è un’animazione perfetta. Di solito, per riuscirci è necessario conoscere molto bene linguaggi di programmazione come ad esempio JavaScript. Si tratta di un linguaggio molto complesso, difficile da studiare e apprendere molto più di un semplice HTML o CSS.
Per fortuna esistono delle alternative e una di queste è, appunto, Lottie Files. Una completa e ricchissima libreria dedicata ad animazioni web preconfezionate per qualunque genere di sito internet.
Queste animazioni sono in realtà idonee non solo per progetti web ma anche per app, video o altri tipi di applicazioni. Sono fornite in vari formati: url, html, elementor tool, android, apple, json, gif, ecc… E possono essere estrapolate velocemente con pochi e semplici passaggi.
Nello specifico, scopriremo in questo articolo come inserire un’animazione in una pagina o template del sito web, incorporandone lo script tramite html (ad esempio).
Animazione sito web gratuita o a pagamento
Come potrai notare tu stesso visitando il sito lottiefiles.com, la libreria contiene animazioni di qualsiasi genere, sia gratuite che a pagamento.
Per trovare più facilmente l’animazione che cerchi puoi utilizzare la funzione di ricerca per parola chiave e impostare alcuni dei filtri disponibili (tipologia, stile, colore, ecc.).
Inserire l’animazione nel sito
Sia che tu abbia un sito in WordPress sia che utilizzi un altro CMS, inserire un’animazione Lottie in qualsiasi punto della pagina web è davvero molto facile.
Le modalità di inserimento sono essenzialmente due: la prima mediante il plugin Elementor Pro per WordPress e la seconda tramite codice HTML.
Soluzione più semplice: WordPress + Elementor Pro
Se il tuo sito è in WordPress e utilizzi il plugin Elementor Pro (non sai cos’è Elementor? Scopri di più qui), inserire un’animazione Lottie diventa di una semplicità estrema. Questo grazie alla funzionalità integrata del plugin che ti permette di far apparire una determinata animazione semplicemente incollando un link nell’apposito campo.
Utilizzare il widget Lottie di Elementor: URL esterno
È sicuramente il metodo più facile. Una volta che hai creato un account su lottiefiles.com e hai scelto l’animazione tra le tante disponibili, segui questi passi per aggiungerla al tuo sito WordPress, tramite Elementor Pro:
- Vai al sito lottiefiles.com e crea un account gratuito.
- Scegli l’animazione tra le tante disponibili (per esperienza personale, ti consiglio di salvare i link delle animazioni che preferisci o di aggiungere un Like in modo che vengano salvate sul tuo account, in quanto potrebbe essere piuttosto difficile andarle a ritrovare successivamente).
- Clicca poi sull’animazione scelta (si aprirà una finestra pop-up)
- Copia il collegamento del campo “Lottie Animation URL” (attenzione, questo campo compare solo se sei autenticato al sito lottiefiles.com, altrimenti significa che devi ancora creare un account o effettuare il login).
- Passa al tuo sito ed entra nell’interfaccia di Elementor della pagina o template in cui desideri inserire l’animazione.
- Cerca l’elemento Lottie all’interno della libreria di Elementor Pro e trascinalo nella sezione che preferisci.
- Nell’elemento Lottie appena inserito, seleziona URL Esterno per il campo Sorgente.
- Ed ecco pronta la tua animazione!
Opzioni di configurazione
Il plugin Elementor Pro ti permette anche di gestire alcune opzioni di configurazione. Ad esempio, rendere l’animazione ciclica, aggiungere un link, modificare la velocità di riproduzione, invertire la direzione e altro ancora.
Infine, dalla sezione Stile puoi anche personalizzarne la dimensione, l’effetto on hover, l’opacità e i filtri colore.
Utilizzare il widget Lottie di Elementor: file media
L’unico possibile inconveniente di inserire un animazione sul sito tramite URL esterno è che, se quell’URL non dovesse più esistere (ad esempio perché l’animazione viene rimossa dal sito lottiefiles.com), allora non sarebbe più visibile neanche sul tuo sito.
Quindi, a meno che non prevedi di utilizzare l’animazione solo per un periodo di tempo limitato, è meglio utilizzare il metodo File Media.
Nulla di complicato, non temere. Semplicemente, scarica il file con estensione json da lottiefiles.com.
Successivamente, nelle impostazioni del widget di Elementor, seleziona File Media come “Sorgente” e carica nella libreria il file json appena scaricato.
Soluzione alternativa: HTML
Una soluzione alternativa a quella di Elementor è di inserire manualmente un codice HTML nel punto del sito in cui si vuol far apparire l’animazione.
- Vai al sito lottiefiles.com e crea un account gratuito.
- Scegli l’animazione tra le tante disponibili.
- Clicca sull’animazione scelta e poi, sotto “Use this animation in”, clicca HTML.
- Configura l’animazione come preferisci e copia lo snippet di codice che trovi sotto “Generated code”.
- Incolla il codice nel punto della pagina in cui desideri far apparire l’animazione.
Lottiefiles: esempi di animazioni per siti web
Lottiefiles WordPress: personalizzare i colori delle animazioni
Per molte animazioni (non tutte) è possibile cambiarne i colori. Per farlo, clicca su Edit layer colors; si aprirà una nuova finestra con tutti i livelli dell’animazione. Qui puoi modificare i colori di ciascun livello.
Una volta terminata la personalizzazione dei colori, esporta il file json.
Se utilizzi WordPress con Elementor Pro, ti basterà impostare File media anziché URL esterno come Sorgente e poi caricare il file json appena esportato nella libreria media di WordPress.
Convertire animazione Lottie in GIF
E questo è tutto… Spero che l’articolo ti sia d’aiuto per inserire simpatiche animazioni in un qualsiasi tuo progetto web. Buon divertimento!
