Crea animazioni Slick UI

Sempre più frequentemente, i designer e gli sviluppatori stanno riconoscendo l'importanza del design del movimento nel contesto di esperienza utente . L'animazione sul Web non è più un modo per deliziare e wow dell'utente, ma uno strumento funzionale che rende esperienze facili, divertenti e memorabili. E ci sono un numero di diversi strumenti e approcci disponibili, da Animazione CSS. alle tecniche usando bootstrap o html.

L'animazione nel contesto delle interfacce utente è ancora un campo molto nuovo. Non ci sono molte risorse là fuori che insegnano le migliori pratiche o mostrano modelli comuni dell'animazione dell'interfaccia utente che possiamo seguire. La maggior parte delle volte, riguarda la sperimentazione, Test dell'utente e forse un po 'di prova ed errore.

• 15 tutorial di progettazione web reattiva

Quindi in questo tutorial, creeremo qualcosa che non confonderà, segue i modelli comuni ed è elegante. Questa sarà la sezione del profilo della squadra che si vedrà spesso sui siti Web aziendali. L'idea è di mostrare un po 'più informazioni sul membro del team / del personale quando ognuno è in linea. Durante il tutorial utilizzeremo Codepen, ma ovviamente è possibile utilizzare il proprio editor preferito e l'ambiente di sviluppo invece. Ricorda, creando un sito più complesso potrebbe cambiare il tuo web hosting Ha bisogno, quindi assicurati di avere un servizio che funziona per te.

Ti piacerebbe uno strumento semplice per fare un sito? Utilizzare un brillante Builder del sito web .

01. Vai allestire

Inizia aprendo Codepen e creando una nuova penna. Usereremo Bootstrap 4 e SASS (.SCSS), quindi assicurati che all'interno delle impostazioni includate il CSS Bootstrap e JS come collegamenti delle risorse e imposta anche il CSS in SCSS. Un altro link di risorse dovrai aggiungere è font fantastico, che useremo per le nostre icone sociali.

02. Creare contenitori, righe e colonne

I contenitori sono ciò che Bootstrap utilizza come elemento di layout di base e sono richiesti quando si utilizza il sistema GRID predefinito. All'interno dei contenitori, è necessario aggiungere una riga. Le righe sono involucri per le colonne e è possibile specificare il numero di colonne che si desidera su un possibile 12 e quale sarà il punto di interruzione. Nel nostro caso, vogliamo un elemento che ha un punto di interruzione di media grandezza e riempie tre colonne in larghezza.

 & lt; div class = "contenitore" e GT;
 & lt; div class = "riga" e gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Aggiungi il collegamento immagine e il colore qui
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Imposta immagine e colore del profilo

Il primo profilo ui elemento inizieremo sarà per un membro della squadra femminile e farà parte della squadra blu. Il colore verrà specificato utilizzando una classe chiamata blu e il colore effettivo sarà definito utilizzando variabili sass, che faremo in un passo successivo. Quindi dovremo aggiungere una foto e dare una classe chiamata foto.

 & lt; div class = "team blue" & gt;
    & lt; div class = "photo" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Aggiungi nome profilo e titolo

L'ultimo bit di HTML da aggiungere sarà per il nome, il titolo e le icone sociali, che verranno aggiunti sotto l'ultimo tag div che abbiamo appena aggiunto nell'ultimo passaggio. Per le icone sociali, useremo il font fantastico e questi saranno collocati all'interno di una lista non ordinata.

 & lt; div class = "profile-txt" & gt;
      & lt; h1 class = "title" & gt; libbys & lt; / h1 & gt;
      & lt; span class = "posizione" e gt; web designer & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul; ul; ul massima classe = "social-icons" e GT;
       & lt; li & gt; & lt; a href = "" class = "fa fa-facebook" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-twitter" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-linkedin" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-dribble" & gt; & lt; / a & gt; & lt; / li & gt;
    & lt; / UL & GT;
 & lt; / div & gt;
& lt; / div & gt; 

05. Impostare le variabili sass

Se stai seguendo insieme usando Codepen, allora avrai già installato Sass e pronto per partire. Hai solo bisogno di fare clic sull'icona delle impostazioni della penna / scegliere SCSS come preprocessore CSS. Quindi possiamo andare avanti e aggiungere alcune variabili che memorizzeranno tutti i nostri colori. Abbiamo usato RGBA come valori dei colori per permetterci il controllo più significativo di tutto l'opacità dei colori.

 $ Bluegradient: RGBA (103, 188, 223.8);
$ Lightgreen: RGBA (188, 219, 183, .5);
$ verde: RGBA (119, 180, 109, 0.5);
$ Green-Border: RGBA (171, 221, 164, 0.5);
$ BLU: RGBA (80, 205, 227, 1);
$ Blue Border: RGBA (147, 223, 236, 1); 

06. Carica un'immagine di sfondo

Per far sembrare le cose più attraenti, metteremo una bella immagine di sfondo sul corpo. Qui possiamo usare il nostro primo set di variabili e dare all'immagine di sfondo una gradiente sovrapposizione gradiente che va da verde chiaro al blu. Quindi per rendere la nostra immagine di sfondo pienamente reattiva, imposteremo l'altezza di vista su 100VH.

 Body {
 Sfondo: gradiente lineare (a destra, $ lightgreen, $ Bluegradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Center No-ripetere;
 Dimensioni di sfondo: copertina;
 Posizione: relativo;
 Altezza: 100VH;
 } 

07. Scegli uno sfondo e un'immagine del profilo

Ogni profilo di squadra riceverà gli stessi stili e il team di classe sarà utilizzato per questo. Lo sfondo sarà bianco, tutti i contenuti centrati e dobbiamo assicurarci che la posizione sia impostata su relativa. Quindi possiamo includere il CSS per l'immagine del profilo. Per ottenere i migliori risultati, assicurati che l'immagine originale che utilizzi abbia le dimensioni non più grandi di 200px quadrati. Tuttavia, cambieremo l'altezza e la larghezza di questi all'interno della regola della foto CSS.

 .Team {
 Imbottitura: 30px 0 40 px;
 Margine-Top: 60px;
 Sfondo: #fff;
 Text-Align: Center;
 Overflow: nascosto;
 Posizione: relativo;
 Cursore: puntatore;
 Box-shadow: 0 0 25px 1px RGBA (0,0,0,03);
 .photo {
 display: blocco in linea;
 Larghezza: 130 px;
 Altezza: 130 px;
 Margin-Bottom: 50px;
 Posizione: relativo;
 z-index: 1;
 }
 } 

08. Aggiungi le animazioni

Il primo pezzo di animazione aggiungeremo sarà nella parte superiore del nostro elemento del profilo. L'idea è che quando movimentiamo su tutto l'elemento, una forma circolare blu animerà. Possiamo controllare quanto del blu possiamo vedere specificando la posizione di questo per avere una percentuale inferiore. Quindi gioca con questa percentuale e avrai un'idea migliore di come funziona. Non sai mai: potresti persino scoprire un effetto migliore!

 .Blue .photo: prima {
 Contenuto: "";
 Larghezza: 100%;
 Altezza: 0px;
 Border-Radius: 50%;
 Sfondo: $ blu;
 Posizione: assoluto;
 Fondo: 130%;
 Destra: 0;
 a sinistra: 0;
 Trasforma: scala (3);
 Transizione: tutti .3s linear 0s;
}
.team: Hover .photo: prima {
 Altezza: 100%;
} 

09. Animazione della foto della squadra

La foto della squadra è il nostro punto focale in questo ui ed è probabilmente l'elemento più ovvio che ti aspetteresti di animare in qualche forma o forma. Il CSS che aggiungeremo in questo passaggio girerà per la prima volta la foto in un cerchio più piccolo, poi quando si è librato lì sarà un bordo blu chiaro aggiunto e la foto ridimensiona insieme al confine. Con le transizioni aggiunte, otteniamo una bella animazione fluida.

 .Blue .pic: dopo {
 Contenuto: "";
 Larghezza: 100%;
 Altezza: 100%;
 Border-Radius: 50%;
 Sfondo: $ blu;
 Posizione: assoluto;
 Top: 0;
 a sinistra: 0;
 z-index: 1;
}
.team .photo img {
 Larghezza: 100%;
 Altezza: Auto;
 Border-Radius: 50%;
 Trasforma: scala (1);
 Transizione: tutti 0.9s facilitano lo 0s;
}
.blue: Hover .photo img {
 Box-shadow: 0 0 0 14px $ Bordo blu;
 Trasforma: scala (0.6);
 }

10. Tieni il nome del profilo e la posizione

Il nome del profilo e la posizione hanno bisogno di un po 'di riordino. Questi non saranno animati ma non dovrebbero impedirti di aggiungere la tua animazione a questi se desideri. Forse le scala leggermente su Hover, come avrai abbastanza spazio a causa del ridimensionamento della foto.

 .profile-txt {
 Margin-Bottom: 30px;
 .stitle {
 Dimensioni del carattere: 2Rem;
 Peso dei font: 700;
 Colore: # 333;
 Spaziatura lettera: 1.5 px;
 Trasformazione del testo: capitalizza;
 Margin-Bottom: 6px;
 }
 .posizione{
 blocco di visualizzazione;
 Font-Dimensione: 1Rem;
 Colore: # 555;
 }
} 

11. Aggiungi icone sociali

Le icone sociali saranno prima posizionate in fondo alla pagina di -100px. Poi, quando lo aggiramo, la posizione inferiore sarà impostata su zero e con una transizione aggiunta, questo ci darà una bella animazione fluida mentre si sposta in vista. Le icone riceveranno il proprio stato di volo, stabilendo il loro background in bianco e l'icona in blu.

 .Blue .Social-icons {
 Larghezza: 100%;
 Stile di lista: nessuno;
 Imbottitura: 0;
 Margine: 0;
 Sfondo: $ blu;
 Posizione: assoluto;
 Fondo: -100px;
 a sinistra: 0;
 Transizione: tutte le facilità di 0.6;
 li {
 display: blocco in linea;
 
 un {
 blocco di visualizzazione;
 Imbottitura: 8 px;
 Font-Dimensione: 1Rem;
 Colore: #FFFF;
 Decorazione del testo: nessuno;
 Transizione: tutte le facilità 0.5s;
 & amp;: Hover {
 Colore: $ blu;
 Sfondo: #fff;
 }
 }
 }
}
.team: hover .social-icons {
 Fondo: 0px;
} 

12. Fai il membro della squadra verde

Per mescolare un po 'le cose, possiamo iniziare ad aggiungere più membri alla nostra squadra. Il colore che useremo per questo prossimo sarà verde. Ma per prima cosa torna nella sezione / file HTML e tutto ciò che dobbiamo fare è copiare la classe COL-MD-3 - non la rotazione fino all'ultimo tag div sotto le icone sociali e incollarlo.

 & lt; div class = "team green" & gt;
 & lt; div class = "photo" & gt;
 & lt; img src = "https://image.ibb.co/mplns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Una volta che hai cambiato la classe blu in verde, possiamo finalmente aggiungere in tutto il CSS che ci daranno la stessa animazione.

. Green: Hover .photo img {
 Box-shadow: 0 0 0 14px $ Bordo verde;
 Trasforma: scala (0.6);
 }
.Green .photo: prima {
 Contenuto: "";
 Larghezza: 100%;
 Altezza: 0px;
 Border-Radius: 50%;
 Sfondo: $ verde;
 Posizione: assoluto;
 Fondo: 135%;
 Destra: 0;
 a sinistra: 0;
 Trasforma: scala (3);
 Transizione: tutti .3s linear 0s;
}
.Green .social-icons {
 Larghezza: 100%;
 Stile di lista: nessuno;
 Imbottitura: 0;
 Margine: 0;
 Sfondo: $ verde;
 Posizione: assoluto;
 Fondo: -100px;
 a sinistra: 0;
 Transizione: tutte le facilità di 0.6;
 li {
 display: blocco in linea;
 un {
 blocco di visualizzazione;
 Imbottitura: 8 px;
 Font-Dimensione: 1Rem;
 Colore: #FFFF;
 Decorazione del testo: nessuno;
 Transizione: tutte le facilità 0.5s;
 & amp;: Hover {
 Colore: $ verde;
 Sfondo: #fff;
 }
 }
 }
} 

E la bellezza di questo approccio è che puoi ripetere come richiesto per molte classi di colori diverse, consentendoti a temare sottilmente le tue animazioni UI come richiesto.

Se stai costruendo un sito con una squadra, assicurati di essere affidabile, sicuro deposito cloud. per mantenere le cose coesive.

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

Vuoi saperne di più su Ins e Outs of Ui Animation?

Se sei interessato a saperne di più su come puoi creare i tuoi siti POP e Sparkle usando un'elegante animazione UI, assicurati di aver scelto il tuo biglietto per Genera Londra. .

Un designer di front-end e sviluppatore attualmente lavorando come sviluppatore creativo per Asemblr.com, Steven Roberts consegnerà il suo trimestre - animazione CSS: oltre le transizioni - in cui ti mostrerà i migliori strumenti per il lavoro e ricreare alcune delle migliori animazioni Il Web ha da offrire, scoprendo le possibilità e le limitazioni dell'animazione con solo CSS.

Genera Londra ha luogo dal 19 al 21 settembre 2018. Ottieni il tuo biglietto ora .

Articoli Correlati:

• Come usare l'animazione nelle app mobili
• La Guida del Pro Design dell'UI
• Una guida per principianti per progettare animazioni di interfaccia