Lag slick ui animasjoner

Flere og oftere, designer designere og utviklere betydningen av bevegelsesdesign i sammenheng med Brukererfaring . Animasjon på nettet er ikke lenger en måte å glede seg over og wow brukeren, men et funksjonelt verktøy som gjør opplever 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 beste praksis eller viser felles mønstre av UI-animasjon som vi kan følge. Mesteparten av tiden, det handler om eksperimentering, bruker testing og kanskje litt prøve og feil.

• 15 Responsive Web Design Tutorials

Så i denne opplæringen vil vi skape noe som ikke forveksler, følger vanlige mønstre og er stilig. Dette vil være lagprofildelen som du ofte ser på bedriftswebsteder. Tanken er å vise litt mer informasjon om lag / medarbeider når hver enkelt er svevet over. Gjennom opplæringen skal vi bruke kodepen, men selvfølgelig kan du bruke ditt eget favorittredaktør og utviklingsmiljø i stedet. Husk, å skape et mer komplekst nettsted kan endre din Web Hosting. Behov 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. Få satt opp

Begynn med å åpne kodepen og skape en ny penn. Vi skal bruke Bootstrap 4 og Sass (.Scss), så sørg for at i innstillingene du inkluderer Bootstrap CSS og JS som ressursforbindelser og også sette CSS til SCSS. En annen ressursforbindelse du må legge til, er Font Awesome, som vi vil bruke til våre sosiale ikoner.

02. Opprett beholdere, rader og kolonner

Beholdere er hva bootstrap bruker som det grunnleggende layoutelementet, og de er påkrevd når du bruker standardgittersystemet. Innenfor beholdere må du legge til på rad. Rader er wrappers for kolonner, og du kan angi antall kolonner som du vil ha ut av en mulig 12 og hva brytepunktet vil være. I vårt tilfelle vil vi ha et element som har et mellomstort brytepunkt og fyller tre kolonner i bredde.

 & lt; div class = "container" & gt;
 & lt; div class = "rad" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Legg til bildekobling og farge her
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Sett profilbilde og farge

Det første profilsyre-elementet vi vil begynne med, vil være for et kvinnelig lagmedlem, og hun vil være en del av det blå laget. Fargen vil bli spesifisert ved hjelp av en klasse som heter Blue, og den faktiske fargen vil etter hvert bli definert ved hjelp av Sassvariabler, som vi skal gjøre i et senere trinn. Da må vi legge til i et bilde og gi det en klasse kalt bilde.

 & 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. Legg til profilnavn og tittel

Den siste biten av HTML som skal legges til, vil være for navnet, tittelen og sosiale ikonene, som vil bli lagt til under den siste div-taggen, vi har nettopp lagt til i det siste trinnet. For de sosiale ikonene vil vi bruke skrifttype Awesome, og disse vil bli plassert i en uordnet liste.

 & lt; div class = "Profil-txt" & gt;
      & lt; h1 class = "tittel" & gt; libby & lt; / h1 & gt;
      & lt; span class = "posisjon" & gt; webdesigner & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul klasse = "sosiale ikoner" & gt;
       & lt; a href = "" class = "fa fa-facebook" & gt; / l li & gt;
       & lt; en href = "" class = "fa fa-twitter" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; a href = "" Class = "Fa Fa-LinkedIn" & gt; / li & gt;
       & lt; a href = "" class = "fa fa-dribbble" & gt; / li & gt;
    lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Sett Sassvariabler

Hvis du følger med å bruke Codepen, vil du allerede ha Sass installert og klar til å gå. Du trenger bare å klikke på penninnstillinger-ikonet / -knappen og velge SCS som din CSS-preprocessor. Da kan vi gå videre og legge til noen variabler som vil lagre alle våre farger. Vi har brukt RGBA som fargeverdier for å gi oss mer meningsfylt kontroll over alle fargenees opacitet.

 $ Bluegradient: RGBA (103, 188, 223 ,.8);
$ LightGreen: RGBA (188, 219, 183 ,.5);
$ GREEN: 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, vil vi plassere et fint 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ønn til blå. Deretter for å gjøre vårt bakgrunnsbilde fullt responsivt, vil vi sette visningshøyden til 100VH.

 Kropp {
 bakgrunn: lineær gradient (til høyre, $ lightgreen, $ bluegradient), url ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Senter No-Repeat;
 Bakgrunnsstørrelse: Deksel;
 posisjon: relativ;
 Høyde: 100VH;
 } 

07. Velg en profil bakgrunn og bilde

Hver lagprofil vil bli gitt de samme stilene, og klassetet vil bli brukt til dette. Bakgrunnen blir hvit, alt innholdssentral og vi må sørge for at stillingen er satt til slektning. Da kan vi inkludere CSS for profilbildet. For best resultat, sørg for at det opprinnelige bildet du bruker, har dimensjoner ikke større enn 200px-torget. Imidlertid vil vi endre høyden og bredden på disse i Photo CSS-regelen.

 .team {
 Padding: 30px 0 40px;
 margin-top: 60px;
 Bakgrunn: #fff;
 Tekstjustering: Senter;
 Overflow: Skjult;
 posisjon: relativ;
 Markør: Pointer;
 Box-Shadow: 0 0 25px 1px RGBA (0,0,0,0,3);
 .photo {
 Skjerm: Inline-blokk;
 Bredde: 130px;
 Høyde: 130px;
 margin-bunn: 50px;
 posisjon: relativ;
 Z-indeks: 1;
 }
 } 

08. Legg til animasjonene

Det første animasjonen vi vil legge til, vil være på toppen av vårt profilelement. Tanken er at når vi svinger over hele elementet, vil en blå sirkulær form animere ned. Vi kan kontrollere hvor mye av det blå vi kan se ved å spesifisere posisjonen til dette for å ha en bunnprosent. Så spill rundt med denne prosentandelen, og du får en bedre ide om hvordan dette fungerer. Du vet aldri: Du kan til og med oppdage en bedre effekt!

 .blue .foto: før {
 innhold: "";
 Bredde: 100%;
 Høyde: 0px;
 Border-Radius: 50%;
 Bakgrunn: $ blå;
 posisjon: absolutt;
 bunn: 130%;
 Høyre: 0;
 Venstre: 0;
 transformasjon: skala (3);
 Overgang: Alle .3s lineære 0s;
}
.Team: hover .foto: før {
 Høyde: 100%;
} 

09. Animere Team Photo

Teamfotoet er vårt fokuspunkt i denne UI og er sannsynligvis det mest åpenbare elementet som du forventer å animere i noen form eller form. CSS vi vil legge til i dette trinnet, vil først dreie bildet til en mindre sirkel, da når det er svevet der, vil det være en lett blå grense lagt til den, og bildet vil skalere sammen med grensen. Med overgangene lagt til, får vi en fin væske animasjon.

 .blue .pic: Etter {
 innhold: "";
 Bredde: 100%;
 Høyde: 100%;
 Border-Radius: 50%;
 Bakgrunn: $ blå;
 posisjon: absolutt;
 Topp: 0;
 Venstre: 0;
 Z-indeks: 1;
}
.Team .Photo img {
 Bredde: 100%;
 Høyde: Auto;
 Border-Radius: 50%;
 Transform: Skala (1);
 Overgang: Alle 0.9s lette 0s;
}
.blue: hover .photo img {
 Box-Shadow: 0 0 0 14px $ Blue-Border;
 transformasjon: skala (0,6);
 }

10. Tweak profilnavnet og posisjonen

Profilnavnet og posisjonen trenger litt å rydde opp. Disse vil ikke bli animert, men det bør ikke stoppe deg fra å legge til din egen animasjon til disse hvis du vil. Kanskje skala dem litt på svinger, da du har nok plass på grunn av endringen av bildet.

 .profile-txt {
 margin-bunn: 30px;
 .title {
 Font-størrelse: 2rem;
 font-vekt: 700;
 Farge: # 333;
 Letter-avstand: 1.5px;
 Tekst-transform: Kapitaliser;
 margin-bunn: 6px;
 }
 .stilling{
 Skjerm: blokk;
 FONT-STØRRELSE: 1MEM;
 Farge: # 555;
 }
} 

11. Legg til sosiale ikoner

De sosiale ikonene vil først plasseres av bunnen av siden med -100px. Så når vi svinger over det, vil bunnposisjonen bli satt til null og med en overgang lagt til, dette vil gi oss en fin glatt animasjon som den beveger seg tilbake til visning. Ikonene vil bli gitt sin egen Hover-tilstand, og sette bakgrunnen til hvitt og ikonet til Blå.

 .blue .social-ikoner {
 Bredde: 100%;
 Liste-stil: ingen;
 polstring: 0;
 margin: 0;
 Bakgrunn: $ blå;
 posisjon: absolutt;
 bunn: -100px;
 Venstre: 0;
 Overgang: Alle 0,6s letthet;
 li {
 Skjerm: Inline-blokk;
 
 en {
 Skjerm: blokk;
 polstring: 8px;
 FONT-STØRRELSE: 1MEM;
 farge: #fff;
 Tekst-dekorasjon: ingen;
 Overgang: Alle 0,5s letthet;
 & amp;: hover {
 Farge: $ blå;
 Bakgrunn: #fff;
 }
 }
 }
}
.Team: hover. Social-ikoner {
 bunn: 0px;
} 

12. Gjør det grønne gruppemedlemmet

For å blande ting opp litt, kan vi begynne å legge til flere medlemmer i vårt team. Fargen vi skal bruke til dette neste, vil bli grønt. Men først gå tilbake til HTML-delen / filen, og alt vi trenger å gjøre er å kopiere Col-MD-3-klassen - ikke raden - ned til den siste div-taggen under de sosiale ikonene og lim den inn i det.

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

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

 .green: Hover .photo img {
 Box-Shadow: 0 0 0 14px $ Green-Border;
 transformasjon: skala (0,6);
 }
.green .Photo: før {
 innhold: "";
 Bredde: 100%;
 Høyde: 0px;
 Border-Radius: 50%;
 Bakgrunn: $ grønn;
 posisjon: absolutt;
 Bunn: 135%;
 Høyre: 0;
 Venstre: 0;
 transformasjon: skala (3);
 Overgang: Alle .3s lineære 0s;
}
.green .social-ikoner {
 Bredde: 100%;
 Liste-stil: ingen;
 polstring: 0;
 margin: 0;
 Bakgrunn: $ grønn;
 posisjon: absolutt;
 bunn: -100px;
 Venstre: 0;
 Overgang: Alle 0,6s letthet;
 li {
 Skjerm: Inline-blokk;
 en {
 Skjerm: blokk;
 polstring: 8px;
 FONT-STØRRELSE: 1MEM;
 farge: #fff;
 Tekst-dekorasjon: ingen;
 Overgang: Alle 0,5s letthet;
 & amp;: hover {
 Farge: $ grønn;
 Bakgrunn: #fff;
 }
 }
 }
} 

Og skjønnheten i denne tilnærmingen er at du kan gjenta som nødvendig for mange forskjellige fargeklasser, slik at du kan subtly tema dine brukergrensesnitt som kreves.

Hvis du bygger et nettsted med et lag, må du sørge for at du blir pålitelig, sikker skylagring å holde ting sammenhengende.

Denne artikkelen ble opprinnelig publisert i utgave 307 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp utgave 307. eller Abonner på netto .

Vil du lære mer om ins og outs av UI animasjon?

Hvis du er interessert i å lære mer om hvordan du kan gjøre nettstedene dine pop og glitrende ved hjelp av Sleak UI-animasjon, må du sørge for at du har plukket opp billetten din for Generere London .

En front-end designer og utvikler som jobber som kreativ utvikler for Asemblr.com, Steven Roberts vil levere sin snakk - CSS animasjon: utover overganger - der han vil vise deg de beste verktøyene for jobben og gjenskape noen av de beste animasjonene Internett har å tilby, samtidig som de oppdager mulighetene og begrensningene for animering med bare CSS.

Generer London finner sted fra 19-21 september 2018. Få din billett nå .

Relaterte artikler:

• Slik bruker du animasjon i mobilapper
• Pro's Guide til UI Design
• En nybegynnerveiledning for å designe grensesnitt animasjoner