Aggiungi animazioni UI al tuo sito

Sep 14, 2025

Come si fa

La maggior parte delle persone vede le interfacce utente giornaliere, sia che si tratti di un'app mobile o su un sito web, quindi è importante farlo bene quando li creano (a Builder del sito web renderà questo semplice per te), e se puoi ravvivare con alcuni Animazione CSS. , tutto il meglio.

Esplora la nuova frontiera dell'animazione CSS

Durante la costruzione del Web, in particolare quando si tratta di animazione, devi considerare cose come il supporto e le prestazioni del browser (decente web hosting Aiuterà qui). In questo tutorial, ti guiderà attraverso due delle migliori soluzioni per creare animazioni e transizioni dell'interfaccia utente.

Usereremo una combinazione di CSS e Greensock. (GSAP). Siamo tutti consapevoli del CSS, ma alcuni di voi potrebbero non essere a conoscenza della piattaforma Greensock. GreenSock è un framework JavaScript che consente di creare facilmente animazioni straordinarie con elementi HTML usando solo poche righe di codice.

Le immagini e i loghi sono particolarmente rimasti fuori molto di più negli ultimi anni. Quanto spesso usiamo emoji piuttosto che testo? Le navigazioni mobili sembrano usare le icone piuttosto che il testo e nel tempo gli utenti vengono a sapere dove ci portano ciascuno. Cominciamo creando una barra di navigazione animata solo utilizzando i loghi. Quando si aggira su ciascuno, animerà lo stato finale, il che sarà simile a questo screenshot. Ho un sacco di media da aggiungere? Tornalo in deposito cloud. .

UI animations: icons — Abbiamo le sei icone di navigazione e uno di loro mostra ciò che lo stato di volo sembrerà una volta completata l'animazione

Costruire la navigazione

Prima di tutto, creeremo un nuovo file index.html e creeremo e configureremo la nostra area di navigazione insieme a sei collegamenti. Ogni collegamento sarà composto da un'icona presa dagli ioniconi. Avremo bisogno di assegnare una classe a ciascuno.

 & lt; div class = "navigationbar" e gt;
& lt; a href = "#" class = "navlogo ion-ios-star-outline" & gt; & lt; / A & GT;
& lt; un href = "#" class = "navlogo ion-ios-list-outline" & gt; & lt; / A & GT;
& lt; a href = "#" class = "navlogo ion-ios-chatboxes-outline" & gt; & lt; / A & GT;
& lt; a href = "#" class = "navlogo ion-ios-home-outline" & gt; & lt; / A & GT;
& lt; a href = "#" class = "navlogo ion-ios-to-outline" & gt; & lt; / A & GT;
& lt; un href = "#" class = "navlogo ion-ios-gear-outline" & gt; & lt; / A & GT;
& lt; / div & gt;

Non copriremo il documento completo HTML o CSS in dettaglio ma puoi Ottieni l'elenco completo del codice da GitHub .

Successivamente, avremo bisogno di creare un file CSS chiamato style.csss e quindi inserire la seguente riga di codice per importare ioniconi:

 @Import URL (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

Ora stabiliremo la classe Navlogo. Per le nostre immagini di navigazione all'interno del foglio di stile. Qui organizzeremo la posizione, l'altezza, la dimensione del carattere ecc.

 .NAVLOGO {
  Posizione: relativo;
  dimensione del carattere: 40 px;
  Larghezza: 75 px;
  Margine: 40 px;
  Altezza: 75 px;
  Altezza di linea: 75 px;
  display: blocco in linea;
  Colore: #FFFF;
}

.navlogo: dopo {
  Posizione: assoluto;
  Top: 0;
  Fondo: 0;
  a sinistra: 0;
  Destra: 0;
  Border: 2px Solid # E6E6E6;
  Contenuto: '';
  z-index: -1;
  Border-Radius: 50%;
}

Successivamente, abbiamo bisogno di creare l'animazione per il nostro .navlogo. elemento. Qui creeremo gli effetti di rotazione e transizione, oltre a cambiare il colore dell'elemento su Hover.

 .navlogo: prima,
.navlogo: dopo {
  -Webkit-Transition: tutti 0,45s facili da lavoro;
  Transizione: tutti 0.45s facilità in uscita;
}
.navlogo: Hover,
.navlogo: attivo,
.navlogo.hover {
  Colore: # c0392b;
}
.navlogo: Hover: dopo,
.navlogo: attivo: dopo,
.navlogo.hover: dopo {
  Border-Color: trasparente # c0392b;
  -Webkit-Trasforma: ruota (360Deg);
  Trasforma: ruotare (360DEG);
}

Infine, avremo bisogno di aggiungere un evento che rimuove la classe di volo quando il mouse non si libra più sul nostro logos. Questo per assicurarsi che il nostro logo venga fuori dalla sua animazione. Creare un nuovo file JavaScript chiamato main.js e quindi inserire il seguente codice:

 $ (". Hover"). Mouseelave (
  funzione () {
    $ (questo) .removeclass ("Hover");
  }
);

La nostra navigazione è ora pronta per andare, a parte l'aggiunta di alcuni collegamenti ipertestuali. Siamo riusciti a raggiungere questo solo usando CSS3.

Creare e animare i pulsanti sul carico

UI animations: animated buttons — I pulsanti appariranno uno per uno con un ritardo di un secondo in mezzo. Greensock ti consente di farlo con qualsiasi elemento HTML

Ora aggiungeremo quattro pulsanti alla nostra pagina e utilizzare la libreria GreenSock per portare lentamente ciascun pulsante, uno dopo l'altro con un ritardo di un secondo. Questo creerà un bel effetto di transizione.

Innanzitutto, avremo bisogno di riaprire il file index.html e creare la sezione del pulsante usando il codice qui sotto:

 & lt; div id = "buttlerea" & gt;
& lt; button class = "ANUBBUTON" & GT; Cambia colore Colore & Lt; / Button & GT;
& lt; tasto class = "antubutton" & gt; opzione 1 & lt; / button & gt;
& lt; button class = "antubutton" & gt; opzione 2 & lt; / button & gt;
& lt; tasto class = "antubutton" & gt; opzione 3 & lt; / button & gt;
& lt; / div & gt;

Abbiamo quindi bisogno di creare un riferimento alla Biblioteca Greensock all'interno del & lt; testa e GT; sezione.

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt; & lt; / script & gt;

Infine, dobbiamo impostare la nostra animazione. Questo prenderà solo una riga di codice. Staggerfrom. è una funzione che scapperà l'ora di inizio del nostro elemento. Nelle nostre parentesi, specifichiamo il nome dell'elemento. In questo caso sarebbe .ANBUBUBUTTON. . Dobbiamo anche impostare una durata e in questo caso è impostato su un secondo tra ciascuno Antuby. elemento.

 Tweenmax.Staggerfrom ('. ANGUBUTION', 1, {OPACITÀ: 0}, 1);

Transizione del colore di sfondo ed elemento

UI animations: colour transition — È così che l'interfaccia utente si prenderà cura della transizione di sfondo e pulsante da un colore all'altro

La prossima cosa che vedremo è la transizione del sito Web e dei pulsanti del sito Web da un colore all'altro. Non incontriamo spesso questa caratteristica sui siti web, anche se sarebbe sicuramente interessante per le cose come l'accessibilità o per le preferenze di app Web quando l'utente potrebbe voler impostare la propria combinazione di colori.

Assicurati di avere un colore di sfondo e un colore di confine e testo impostato per la tua pagina nel file Style.css.

 .ANUBUBUTON {
Bordo: 2 px solido # 000;
Colore: # 000;
}

Successivamente, creeremo una funzione JavaScript per impostare le nostre varie transizioni di colore GreenSock.

 Cambio funzione ()
{
   Tweenmax.to ("corpo", 3, {backgroundimage: "gradiente lineare (a sinistra, # 646580, # 212121)"});
   Tweenmax.to ("Anbutton", 3, {colore: "# fff"});
   Tweenmax.to ("Anbutton", 3, {confine: "2px solido #fff"});
}

Stiamo andando più a un aspetto scuro, quindi lo sfondo sarà buio, ma i pulsanti appariranno luce. La prima riga di codice cambierà il colore di sfondo in una variazione più scura per un periodo di tre secondi. La seconda e terza linea cambierà il colore e il bordo del testo in bianco su un periodo di tre secondi.

Infine, avremo bisogno di chiamare il cambia sfondo() Funzione da uno dei nostri pulsanti trovati nel file index.html.

 & lt; button class = "ANUBUBUTON" onClick = "Changebackground ()" & gt; modifica background & lt; / button & gt;

Il progetto è ora pronto per essere eseguito. Certo, puoi andare molto ulteriormente aggiungendo nuovi elementi e cambiando lo stile di colore anche per quelli.

Questo articolo è stato originariamente pubblicato in emissione 309 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 309 qui o Iscriviti qui .

Articoli Correlati:

Animazione e interruttori titoli con CSS
5 consigli per CSS super-veloce
Un'introduzione alle proprietà personalizzate CSS

Aggiungi animazioni UI al tuo sito

Costruire la navigazione

Creare e animare i pulsanti sul carico

Transizione del colore di sfondo ed elemento

Come si fa - Articoli più popolari

Costruisci un blog reattivo veloce con Svelte e Saudper

Come costruire un sito di blog con Gatsby

Come creare un'abilità Alexa per il tuo sito

Dipingi una lepre maliziosa in acquerello

Crea movimento dinamico in una composizione

4 semplici passaggi per migliorare il tuo rendering

Crea un effetto portale in Maya

Come prendere il tuo logo vettoriale da 2D a 3D

Categorie