10 esempi di animazioni SVG per Web designer
SVG (Scalable Vector Graphics) presenta una serie di vantaggi rispetto ad altri formati di immagine utilizzati sul web. Innanzitutto, gli SVG sono scalabili, quindi possono adattarsi a qualsiasi dimensione dello schermo senza alcuna perdita di qualità.
Quindi, i browser possono caricarli più velocemente, utilizzando meno risorse. E possono essere modificati con CSS proprio come se fossero normali elementi HTML. Oltre ad essere utilizzato per immagini statiche, puoi anche creare fantastiche animazioni con SVG. In questo articolo 10 esempi di animazioni SVG per ispirarti a usarle anche nei tuoi progetti web.
See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.default
Questa fantastica demo “Diventa un viaggiatore oggi” di Jose Aguinaga è attualmente l’animazione SVG più popolare su CodePen, e non è una coincidenza, dato che molto lavoro è stato dedicato a questo progetto artistico. L’autore ha creato la grafica con Adobe Illustrator ed esportata con il plug-in di esportazione SVG. Ha anche utilizzato il preprocessore Sass per creare l’animazione dei fotogrammi chiave ottimizzata che sposta con cura il globo attorno allo schermo.
See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.default
Questi caricatori SVG puri di Nikhil Krishnan sono un bellissimo esempio di come creare animazioni SVG adatte a progetti Web reali. Proprio come la demo “Diventa un viaggiatore oggi”, questi caricatori usano anche il preprocessore Sass. Tuttavia, qui l’animazione è un effetto SVG nativo aggiunto direttamente all’elemento SVG animateTransform all’interno della pagina HTML.
See the Pen #2 – Project Deadline – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.default
Questa fantastica animazione con scadenza del progetto di Jonathan Silva è spaventosa e divertente allo stesso tempo. Dimostra molto bene che puoi davvero usare le animazioni SVG per qualsiasi tipo di progetto creativo. Con questo piccolo ma intelligente promemoria delle scadenze, puoi motivare la tua squadra a tenere il passo con le scadenze, senza essere un fastidio. Qui, l’autore ha creato l’effetto animato usando la regola @keyframes dei CSS e un po ‘di jQuery per impostare i tempi.
See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen.default
Oltre alle immagini animate, puoi anche utilizzare le animazioni SVG per creare fantastici effetti di testo. Ad esempio, dai un’occhiata a questa bellissima animazione testuale di Mack Ayache. Usa le semplici forme SVG per creare le lettere. Quindi, aggiunge il movimento separatamente ad ogni lettera usando gli attributi SVG tratto-tratto-offset e tratto-dasharray . Tuttavia, aggiunge questi attributi al CSS anziché all’elemento <svg> all’interno dell’HTML. Può farlo perché gli attributi di presentazione di SVG possono essere usati anche come proprietà CSS.
See the Pen Sketch Photo by Kristen Zirkler (@kristenzirkler) on CodePen.default
Questa straordinaria animazione fotografica di Kristen Zirkler può essere un’ottima aggiunta a qualsiasi interfaccia utente che mostri le foto del profilo. L’autore ha creato la grafica in Adobe Illustrator posizionando due livelli uno sopra l’altro, uno per la sua foto e uno per il percorso che le circonda. Quindi, ha usato Sass per aggiungere l’animazione del fotogramma chiave che modifica le regole di tratto-dashoffset e opacità .
See the Pen Beating Heart – CSS and SVG animation – low poly by morkett (@morkett) on CodePen.default
Se vuoi vedere un esempio di animazione SVG davvero sofisticata, dai un’occhiata all’animazione del cuore pulsante di David Corkett . Anche se è un effetto complicato, non utilizza JavaScript ma si basa esclusivamente su SVG e CSS. Il cuore è composto da più poligoni a cui l’autore ha aggiunto effetti di andamento e di allentamento usando la regola @keyframes dei CSS .
See the Pen Pointless Rider by Elliott Munoz (@elliottmunoz) on CodePen.default
Se hai mai desiderato creare un logo animato, ecco un ottimo esempio. La demo di Pointless Rider di Elliott Munoz mostra che puoi usare le animazioni SVG anche per scopi di branding . Di default, è un elegante logo in bianco e nero. L’autore ha aggiunto il sottile effetto animato con gli elementi animateTranform e animateMotion SVG. Qui, il CSS allinea solo gli elementi e imposta i colori, ma è SVG che si occupa di tutto il movimento sullo schermo.
See the Pen List Expand by Daniel (@daniel_wolf) on CodePen.default
Se vuoi un esempio di animazione SVG che puoi facilmente usare nei progetti di tutti i giorni, ecco una demo interessante. Questo elegante elenco espande l’animazione di Daniel Wolf può funzionare bene in qualsiasi applicazione mobile o web in cui desideri mostrare informazioni estese agli utenti. Secondo la descrizione dell’autore, la chiave di questo effetto è “la tempistica degli elementi che si spostano in transizione”. Le animazioni si basano su CSS e su un po ‘di jQuery per la funzionalità clic.
See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.default
La bellissima animazione SVG di Kenneth Aamås con demo di slider utilizza sia Sass che JavaScript per ottenere un effetto intelligente e controllato dall’utente. Puoi modificare le dimensioni dell’immagine con l’aiuto di tre cursori nella parte inferiore della pagina. Ogni dispositivo di scorrimento è legato a una parte diversa dell’immagine che inizia a muoversi quando l’utente cambia la posizione del dispositivo di scorrimento. Per questa animazione, l’autore utilizza la proprietà CSS di transizione anziché le animazioni dei fotogrammi chiave, che si traduce in un effetto più sottile.
See the Pen Day 004 :: Wanderlust by Heidi Olsen (@SwissWebMiss) on CodePen.default
La demo di Wanderlust mostra un fantastico effetto SVG che puoi vedere nell’interfaccia utente di molte applicazioni di viaggio e di compagnie aeree. Heidi Olsen ha creato questa animazione SVG per The100DayProject. Invece di utilizzare elementi SVG o CSS nativi per l’effetto animato, ha optato per la libreria Tween.js , che è un altro ottimo modo per aggiungere animazioni sofisticate ai percorsi SVG. Ha anche usato il posizionamento assoluto per fissare il piano e il suo percorso sullo schermo.
Come puoi vedere, ci sono molte tecniche che puoi usare per aggiungere un effetto animato a un grafico SVG: troverai sicuramente quello che ti piace di più.
