Lag glatte UI-animasjoner

Innhold

• 01. Sett deg opp
• 02. Lag containere, rader og kolonner
• 03. Angi profilbilde og farge
• 04. Legg til profilnavn og tittel
• 05. Sett Sass-variabler
• 06. Last opp et bakgrunnsbilde
• 07. Velg en profilbakgrunn og et bilde
• 08. Legg til animasjonene
• 09. Animer lagbildet
• 10. Juster profilnavnet og posisjonen
• 11. Legg til sosiale ikoner
• 12. Lag det grønne teammedlemmet
• Vil du lære mer om detaljene i UI-animasjon?

Oftere og oftere anerkjenner designere og utviklere viktigheten av bevegelsesdesign i sammenheng med brukeropplevelsen. Animasjon på nettet er ikke lenger en måte å glede og wow brukeren på, men et funksjonelt verktøy som gjør opplevelser enkle, morsomme og minneverdige. Og det finnes en rekke forskjellige verktøy og tilnærminger tilgjengelig, fra CSS-animasjon til teknikker som bruker Bootstrap eller HTML.

Animasjon i sammenheng med brukergrensesnitt er fortsatt et helt nytt felt. Det er ikke mange ressurser der ute som lærer om beste praksis eller viser vanlige mønstre for UI-animasjon som vi kan følge. Mesteparten av tiden handler det om eksperimentering, brukertesting og kanskje litt prøving og feiling.

• 15 responsive veiledningsveiledninger

Så i denne veiledningen vil vi lage noe som ikke forvirrer, følger vanlige mønstre og er stilig. Dette vil være teamprofilseksjonen som du ofte ser på selskapets nettsteder. Tanken er å vise litt mer informasjon om teamet / medarbeideren når hver enkelt blir svevet over. Gjennom opplæringen bruker vi CodePen, men selvfølgelig kan du bruke din egen favorittredaktør og utviklingsmiljø i stedet. Husk at å opprette et mer komplekst nettsted kan endre webhotellbehovet ditt, så vær sikker på at du har en tjeneste som fungerer for deg.

Vil du ha et greit verktøy for å lage et nettsted? Bruk en strålende nettstedbygger.

01. Sett deg opp

Begynn med å åpne CodePen og lage en ny penn. Vi skal bruke Bootstrap 4 og Sass (.scss), så sørg for at du inkluderer innstillingene du inkluderer Bootstrap CSS og JS som ressurskoblinger, og også setter CSS til SCSS. En annen ressurskobling du må legge til er Font Awesome, som vi vil bruke til våre sosiale ikoner.

02. Lag containere, rader og kolonner

Containere er det Bootstrap bruker som sitt grunnleggende layoutelement, og de kreves når du bruker standard rutenett. Innen containere må du legge til på rad. Rader er omslag for kolonner, og du kan spesifisere antall kolonner du vil ha ut av en mulig 12, og hva brytpunktet vil være. I vårt tilfelle vil vi ha et element som har et mellomstort brytpunkt og fyller tre kolonner i bredden.

div class = ”container”> div class = ”row”> div class = ”col-md-3”>! - legg til bildekobling og farge her / div> / div> / div>

03. Angi profilbilde og farge

Det første profilgrensesnittelementet vi skal begynne med vil være for et kvinnelig teammedlem, og hun vil være en del av det blå laget. Fargen vil bli spesifisert ved hjelp av en klasse som kalles blå, og den faktiske fargen vil til slutt bli definert ved hjelp av Sass-variabler, noe vi vil gjøre i et senere trinn. Da må vi legge til et bilde og gi det en klasse som heter foto.

div class = ”team blue”> div class = ”photo”> img src = ”https://image.ibb.co/kcBGMS/profile_test02.webp” alt = ”Libby”> / div> / div>

04. Legg til profilnavn og tittel

Den siste biten av HTML som skal legges til, vil være for navn, tittel og sosiale ikoner, som vil bli lagt til under den siste div-koden vi nettopp la til i det siste trinnet. For de sosiale ikonene bruker vi Font Awesome, og disse vil bli plassert i en ikke-ordnet liste.

div class = ”profile-txt”> h1 class = ”title”> Libby / h1> span class = ”position”> Web Designer / span> / div> ul class = ”social-icons”> li> a href = ” ”Class =” fa fa-facebook ”> / a> / li> li> a href =” ”class =” fa fa-twitter ”> / a> / li> li> a href =” ”class =” fa fa -linkedin ”> / a> / li> li> a href =” ”class =” fa fa-dribbble ”> / a> / li> / ul> / div> / div>

05. Sett Sass-variabler

Hvis du følger med på CodePen, vil du allerede ha Sass installert og klar til bruk. Du trenger bare å klikke på penninnstillingsikonet / -knappen og velge SCSS som CSS-forprosessor. Så kan vi fortsette og legge til noen variabler som vil lagre alle fargene våre. Vi har brukt rgba som fargeverdier for å gi oss mer meningsfull kontroll over alle fargenes opasitet.

$ blueGradient: rgba (103, 188, 223, .8); $ lightGreen: rgba (188, 219, 183, .5); $ grønn: rgba (119, 180, 109, 0,5); $ green-border: rgba (171, 221, 164, 0,5); $ blå: rgba (80, 205, 227, 1); $ blågrense: rgba (147, 223, 236, 1);

06. Last opp et bakgrunnsbilde

For å få ting til å se mer tiltalende ut, vil vi plassere et pent bakgrunnsbilde på kroppen. Her kan vi bruke vårt første sett med variabler og gi bakgrunnsbildet et behagelig gradientoverlegg som går fra lysegrønt til blått. For å gjøre bakgrunnsbildet vårt responsivt, vil vi sette visningshøyden til 100vh.

body {bakgrunn: lineær-gradient (til høyre, $ lightGreen, $ blueGradient), url (‘https://image.ibb.co/mdDPU7/clouds_cornfield_countryside_158827.webp’) senter no-repeat; bakgrunnsstørrelse: omslag; posisjon: relativ; høyde: 100vh; }

07. Velg en profilbakgrunn og et bilde

Hver lagprofil får de samme stilene, og klasselaget vil bli brukt til dette. Bakgrunnen vil være hvit, alt innhold sentrert, og vi må sørge for at posisjonen er satt til relativ. Deretter kan vi inkludere CSS for profilbildet. For best resultat, sørg for at originalbildet du bruker har dimensjoner som ikke er større enn 200px kvadrat. Imidlertid vil vi endre høyden og bredden på disse innenfor CSS-regelen for bilder.

.team {polstring: 30px 0 40px; margin-top: 60px; bakgrunn: #fff; tekstjustering: sentrum; overløp: skjult; posisjon: relativ; markør: peker; bokseskygge: 0 0 25px 1px rgba (0,0,0,0.3); .foto {display: inline-block; bredde: 130px; høyde: 130px; margin-bunn: 50px; posisjon: relativ; z-indeks: 1; }}

08. Legg til animasjonene

Det første animasjonsstykket vi vil legge til, vil være øverst i profilelementet vårt. Tanken er at når vi svever over hele elementet, vil en blå sirkulær form animere seg nedover. Vi kan kontrollere hvor mye av det blå vi kan se ved å spesifisere posisjonen til dette for å ha en bunnprosent. Så spill deg med denne prosentandelen, så får du en bedre ide om hvordan dette fungerer. Du vet aldri: du kan til og med oppdage en bedre effekt!

.blå .foto: før {innhold: “”; bredde: 100%; høyde: 0px; grenseradius: 50%; bakgrunn: $ blå; posisjon: absolutt; bunn: 130%; høyre: 0; venstre: 0; transform: skala (3); overgang: alle .3s lineære 0s; } .team: hover .photo: før {høyde: 100%; }

09. Animer lagbildet

Lagbildet er vårt fokuspunkt i dette brukergrensesnittet og er sannsynligvis det mest åpenbare elementet du forventer å animere i en eller annen form eller form. CSS vi vil legge til i dette trinnet, vil først gjøre bildet til en mindre sirkel, og når du svever over, blir det lagt til en lyseblå kant, og bildet skaleres ned sammen med kanten. Med overgangene lagt til får vi en fin flytende animasjon.

.blue .pic: etter {content: “”; bredde: 100%; høyde: 100%; grenseradius: 50%; bakgrunn: $ blå; posisjon: absolutt; topp: 0; venstre: 0; z-indeks: 1; } .team .photo img {bredde: 100%; høyde: auto; grenseradius: 50%; transform: skala (1); overgang: alle 0,9s letter 0s; } .blue: hover .photo img {box-shadow: 0 0 0 14px $ blue-border; transform: skala (0,6); }

10. Juster profilnavnet og posisjonen

Profilnavnet og posisjonen trenger litt rydding. Disse blir ikke animert, men det bør ikke hindre deg i å legge til din egen animasjon i disse hvis du vil. Kanskje skalere dem litt opp når du holder markøren, da du får nok plass på grunn av størrelsen på bildet.

.profile-txt {margin-bottom: 30px; .title {font-size: 2rem; skriftvekt: 700; farge: # 333; avstand mellom bokstaver: 1,5 px; tekst-transform: kapitaliser; margin-bunn: 6px; } .posisjon {display: block; skriftstørrelse: 1rem; farge: # 555; }}

11. Legg til sosiale ikoner

De sosiale ikonene plasseres først nederst på siden med -100 px. Så når vi holder markøren over den, vil bunnposisjonen bli satt til null, og med en overgang lagt til, vil dette gi oss en fin jevn animasjon når den beveger seg opp igjen. Ikonene får sin egen svevertilstand, og setter bakgrunnen til hvit og ikonet til blått.

.blue .social-ikoner {bredde: 100%; liste-stil: ingen; polstring: 0; margin: 0; bakgrunn: $ blå; posisjon: absolutt; bunn: -100px; venstre: 0; overgang: alle 0,6s lette; li {display: inline-block; a {display: blokk; polstring: 8px; skriftstørrelse: 1rem; farge: #fff; tekstdekorasjon: ingen; overgang: alle 0,5s lette; &: sveve {farge: $ blå; bakgrunn: #fff; }}}} .team: hover .social-icons {bottom: 0px; }

12. Lag det grønne teammedlemmet

For å blande ting litt sammen kan vi begynne å legge til flere medlemmer i teamet vårt. Fargen vi skal bruke til denne neste vil være grønn. Men gå først tilbake til HTML-seksjonen / filen, og alt vi trenger å gjøre er å kopiere col-md-3-klassen - ikke raden - ned til den siste div-koden under de sosiale ikonene og lime den inn.

div class = ”team green”> div class = ”photo”> img src = ”https://image.ibb.co/mpRLNS/mick_UI.webp” alt = ”Libby”> / div>

Når du har endret den blå klassen til grønn, kan vi endelig legge inn all CSS som vil gi oss den samme animasjonen.

.green: hover .photo img {box-shadow: 0 0 0 14px $ green-border; transform: skala (0,6); } .grønn .foto: før {innhold: “”; bredde: 100%; høyde: 0px; grenseradius: 50%; bakgrunn: $ grønn; posisjon: absolutt; bunn: 135%; høyre: 0; venstre: 0; transform: skala (3); overgang: alle .3s lineære 0s; } .grønne. sosiale ikoner {bredde: 100%; liste-stil: ingen; polstring: 0; margin: 0; bakgrunn: $ grønn; posisjon: absolutt; bunn: -100px; venstre: 0; overgang: alle 0,6s lette; li {display: inline-block; a {display: blokk; polstring: 8px; skriftstørrelse: 1rem; farge: #fff; tekstdekorasjon: ingen; overgang: alle 0,5s lette; &: sveve {farge: $ grønn; bakgrunn: #fff; }}}}

Og det fine med denne tilnærmingen er at du kan gjenta etter behov for mange forskjellige fargeklasser, slik at du subtilt kan tematisere UI-animasjonene etter behov.

Hvis du bygger et nettsted sammen med et team, må du sørge for at du får pålitelig og sikker skylagring for å holde ting sammenhengende.

Denne artikkelen ble opprinnelig publisert i utgave 307 av nett, verdens mest solgte magasin for webdesignere og utviklere. Kjøp utgave 307 eller abonner på nett.

Vil du lære mer om detaljene i UI-animasjon?

Hvis du er interessert i å lære mer om hvordan du kan få nettstedene dine til å dukke opp og glitre ved hjelp av elegant UI-animasjon, må du sørge for at du har hentet billetten din til Generer London. 

En frontdesigner og utvikler som for tiden jobber som kreativ utvikler for Asemblr.com, vil Steven Roberts holde foredraget sitt - CSS Animation: Beyond Transitions - der han vil vise deg de beste verktøyene for jobben og gjenskape noen av de beste animasjonene. nettet har å tilby, mens du oppdager mulighetene og begrensningene ved å animere med bare CSS.

Generate London finner sted fra 19. til 21. september 2018. Få billetten din nå.

Relaterte artikler:

• Hvordan bruke animasjon i mobilapper
• Profesjonell guide til UI-design
• En nybegynnerveiledning for utforming av grensesnittanimasjoner