Un sito web è formato da tante sezioni ed elementi. Progettare il layout del sito web richiede un po’ di tempo e analisi. Infatti, la struttura del sito web è una fase assolutamente indispensabile per definire un progetto completo. Ovviamente, questa fase deve essere completata prima di passare alla fase di edificazione vera e propria. L’animazione del sito web è una delle parti più scenografiche che può arricchire esteticamente (ma anche funzionalmente) un sito web. Quindi, se vuoi creare un sito web o una landing page con qualche 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.
Parliamo in particolare di Lottie Animations, una vasta libreria di animazioni già pronte all’uso e con possibilità di personalizzazione. Si tratta del miglior programma gratuito per aggiungere animazioni sul web che esista oggi sul mercato. Infatti, una delle cose più difficili da realizzare per un web designer è un’animazione perfetta. Di solito, per riuscirci è necessario conoscere molto bene il linguaggio di programmazione Java Script. Si tratta di un linguaggio molto complesso, difficile da studiare e apprendere molto più di un semplice HTML, o di un CSS. Non è quindi un linguaggio accessibile a chiunque, soprattutto a chi è alle prime armi con il mondo del web. Per fortuna esistono delle alternative. Un’alternativa chiamata, 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 animazioni siti web
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 migliore: 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à sconcertante. Questo grazie alla funzionalità integrata del plugin che ti permette di far apparire una determinata animazione semplicemente incollando un link nell’apposito campo.
Una volta che hai creato un account su lottiefiles.com e hai scelto l’animazione tra le tante disponibili, segui i seguenti passi per aggiungerla al tuo sito in WordPress, tramite Elementor Pro:
- Vai al sito lottiefiles.com e crea un account gratuito.
- Scegli l’animazione tra le tante disponibili (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 ripescare in un secondo momento).
- 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.
- Et voilà, ecco pronta la tua animazione!
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.
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 siti web
Lottiefiles WordPress: personalizzare 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!
