5 animazioni SVG per ravvivare il tuo web design

Le animazioni possono rendere un sito web fluido e fluido, ma come puoi incorporare questa funzionalità nel tuo lavoro? Unisciti a noi e scopri come ravvivare il tuo web design con questi esempi creativi di animazione SVG.

Lavorare con grafica vettoriale scalabile

SVG è un formato di file che utilizza le linee, anziché i pixel, per memorizzare e visualizzare le immagini. Come suggerisce il nome, la grafica vettoriale scalabile può scalare senza perdere la qualità.

Oltre ad essere ottimo per il ridimensionamento, puoi anche utilizzare il codice SVG all'interno di HTML e agirà come qualsiasi altro elemento. Ciò significa che puoi usare Regole CSS, codice JavaScripte, soprattutto, le animazioni con gli SVG del tuo sito web.

Puoi creare SVG utilizzando software come Adobe Illustrator e siti Web come SVGator, ma puoi anche crearli a mano. Il formato SVG è un linguaggio XML di testo normale e assomiglia un po' all'HTML.

Questo esempio presenta quattro pulsanti con le proprie icone e uno sfondo a blocchi. Quando selezioni un pulsante, questo cambia da un cerchio a un rettangolo arrotondato, cambiando anche il colore di sfondo della pagina in modo che corrisponda al pulsante.

Un mix di JS e CSS produce questi risultati e tutto inizia con un ciclo che aggiunge listener di eventi ad ogni pulsante.

per (var io = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('clic', pulsante Fare clic);
}

Dopo aver fatto clic su un pulsante, una funzione chiamata buttonClick() esegue diverse azioni. Inizia cambiando il colore di sfondo della pagina:

documento.body.style.backgroundColor = `#${questo.getAttribute('data-background')}`;

Successivamente, aggiunge una classe CSS al pulsante che è stato premuto, attivando un'animazione e modificando il colore di sfondo del pulsante.

menuItemActive.classList.remove('menu__item--attivo');
this.classList.add('menu__item--attivo');
menuItemActive.classList.add('menu__item--anima');
this.classList.add('menu__item--anima');
menuItemActive = questo;

Sebbene semplice, questo esempio di animazione SVG offre un modo unico per rendere il tuo sito Web più coinvolgente. Questo tipo di funzionalità di progettazione è perfetta per i siti Web mobili e le app basate su HTML.

Puoi aggiungere tutti i nodi che desideri a un percorso SVG, rendendoli ideali per la creazione di testo. Questa semplice animazione del tratto dimostra perfettamente la tecnica, con il testo che appare da sinistra a destra come se fosse stato scritto.

L'animazione non ha fotogrammi chiave, applica semplicemente una nuova larghezza del tratto insieme alla proprietà di transizione CSS. In questo modo ogni linea si traccia sullo schermo senza complicate animazioni.

.percorso-1 {
 ictus-dasharray: 1850 2000;
 tratto trattino-offset: 1851;
 transizione: 5s lineare;
}

Una funzione JS aggiunge una classe CSS univoca a ciascuna sezione del testo utilizzando un'unica classe CSS padre per ridurre ulteriormente la densità del codice.

$(funzione() {
funzioneanimazioneStart() {
 $('#contenitore').addClass('fin');
 }
setTimeout (animazioneStart, 250);
});

Come esempio solo CSS, questa animazione SVG è ottima per chiunque non voglia immergersi nel codice JavaScript. L'idea è semplice: un pulsante inizia con una sottolineatura che si trasforma in un bordo completo quando ci passi sopra.

I fotogrammi chiave CSS creano due stati per il pulsante. Il primo stato ha un tratto più spesso e copre solo la parte inferiore del pulsante della forma SVG, a partire da 0%. L'altro stato è il pulsante completo al 100% con una corsa più sottile.

@fotogrammi chiave disegnare {
 0% {
 ictus-dasharray: 140 540;
 tratto trattino-offset: -474;
 larghezza del tratto: 8px;
 }
100% {
 ictus-dasharray: 760;
 tratto trattino-offset: 0;
 larghezza del tratto: 2px;
 }
}

Questi fotogrammi chiave vengono applicati al contorno del pulsante della forma SVG solo quando l'utente sposta il cursore sul pulsante. Usa :hover Pseudoclasse CSS per ottenere ciò, attivando una regola che aggiunge i fotogrammi chiave di animazione al pulsante.

.svg-wrapper: passa il mouse.forma {
-animazione-webkit: 0.5sdisegnarelineareavanti;
animazione: 0.5sdisegnarelineareavanti;
}

Questo mostra come puoi creare bellissime animazioni senza usare codice complesso. Puoi usare questi fondamenti e la tua creatività per creare elementi interattivi più elaborati per il tuo sito web.

Con così tante tecniche interessanti sotto il cofano, è difficile decidere di cosa discutere quando si guarda questo esempio di orologio SVG.

Per iniziare, utilizza la funzione Date() per raccogliere la data e l'ora correnti. Utilizzando questo valore, le funzioni getHours(), getMinutes() e getSeconds() suddividono i dati nelle parti rilevanti. Il codice calcola quindi la posizione di ciascuna lancetta sull'orologio.

var data = nuovoData();
var oreAngolo = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minutoAngolo = 360 * date.getMinutes() / 60;
var secAngolo = 360 * date.getSeconds() / 60;

Memorizzando ciascuna delle mani in un array, le loro posizioni possono essere impostate molto facilmente ogni volta che viene eseguito il codice.

mani[0].setAttribute('a partire dal', cambio (secAngle));
mani[0].setAttribute('a', cambio (secAngle + 360));
mani[1].setAttribute('a partire dal', cambio (angolo minuto));
mani[1].setAttribute('a', cambio (angolo minuto + 360));
mani[2].setAttribute('a partire dal', cambio (oreAngle));
mani[2].setAttribute('a', cambio (oreAngle + 360));

Il tempo ha applicazioni limitate nel regno del web design, ma è utile per i timer per il conto alla rovescia, gli orologi e la memorizzazione di timestamp. Questo esempio offre anche una panoramica sulla creazione di animazioni SVG dinamiche con variabili.

Questa animazione SVG basata su CSS fornisce un modo accurato per rendere incredibile qualsiasi modulo.

Se non è selezionato nulla, il modulo presenta linee in grigio sotto ogni campo. Quando viene selezionato un campo, viene visualizzata una linea, che scorre da sinistra con un'animazione fluida. Se l'utente seleziona un campo diverso, la linea scorre nella nuova posizione con un movimento fluido.

Infine, una volta che l'utente preme il tasto Login pulsante, la linea si trasforma in un cerchio che pulsa durante il caricamento della pagina.

Questo esempio SVG è particolarmente impressionante perché si basa solo sui CSS per produrre un risultato così complesso. Utilizza le variabili CSS per archiviare i dati, semplificando il controllo di elementi come l'app principale.

$ riempimento app: 6vh;
$ larghezza app: 50vh;
$app-altezza: 90vh;
#app {
 larghezza: $ larghezza-app;
 altezza: $app-altezza;
 riempimento: $ riempimento app;
 sfondo: bianco;
 box-ombra: 002rem rgba(Nero, 0.1);
}

Potresti usare questo esempio su qualsiasi modulo web e coinvolgere i tuoi utenti come mai prima d'ora.

Creazione di animazioni SVG personalizzate con HTML, JS e CSS

La creazione di un'animazione SVG da zero può essere un processo difficile quando inizi per la prima volta. Questi esempi ti daranno il vantaggio di cui hai bisogno per creare animazioni SVG che faranno brillare il tuo sito web.

9 Trucchi CSS avanzati per Media Query che dovresti conoscere

Leggi Avanti

Circa l'autore