La fortuna e il coraggio di fare della mia passione il mio lavoro.
Valentina D'Angelo

Animazione Web: linee animate con Anime.js e LineMaker

0

Che ne pensate di una facile animazione web in JavaScript? In una delle newsletter che seguo, mi è arrivato il link a un piccolo tutorial sull’implementazione di linee e griglie animate usando una libreria JavaScript che si chiama Anime.js

Anime.js permette di realizzare animazioni complesse sfruttando CSS, SVG, attributi del DOM e oggetti JS. Per saperne di più si può consultare il sito ufficiale di Anime.js. Siccome mi è sembrata una cosa semplice e carina, mi è venuta voglia di fare qualche prova.

Per prima cosa dobbiamo scaricare la libreria e, una volta decompresso lo zip, dobbiamo richiamarla nel nostro file HTML.

<script src="js/anime.min.js"></script>

Poi dobbiamo importare lo script LineMaker di Codrops.

<script src="js/anime.min.js"></script>
<script src="js/main.js"></script>

Questo plugin permette di creare linee animate in maniera semplicissima, richiamando una funzione e specificando poche opzioni. Qui si possono trovare le istruzioni e alcune demo.
Io ho provato a farci qualche piccola animazione web, usando le demo come traccia per il codice JavaScript.

Il tricolore animato

Pensando a linee animate, la prima cosa che mi è venuta in mente è – in un attacco di patriottismo – il tricolore della nostra bandiera… Siccome si tratta di un’animazione web in entrata, per vedere l’effetto cliccate sul pulsante nero “Ricarica”.
Tra l’altro la nostra bandiera è fatta di due colori complementari (rosso-verde), separati dal bianco; l’insieme costituisce uno schema di colori molto equilibrato, ma è del tutto casuale! Per i curiosi, un breve video sulla storia della bandiera italiana.

Pioggia di colori

Una pioggia di colori svela la sagoma di una mano. Anche qui, siccome si tratta di un’animazione web in entrata, per vedere l’effetto cliccate sul pulsante nero “Ricarica”.

Se fate qualche prova, ricordate di postarmi il link!

Ciao ciao

About Author

Valentina D'Angelo

Lavora nella grafica professionale dal 2000. Freelance per vocazione, appassionata di comunicazione visiva, di segni e immagini parlanti. Innamorata di tutto quello che è nuovo e che è ancora da conoscere. "Su un'isola deserta mi porterei... gli occhi. Forse anche uno smartphone."

Leave A Reply