Luo liivi UI-animaatioita

Yhä useammin suunnittelijat ja kehittäjät tunnustavat liikkeen suunnittelun merkityksen käyttäjäkokemus . Verkossa oleva animaatio ei ole enää keino ilahduttaa ja wow käyttäjä, vaan toiminnallinen työkalu, joka tekee kokemuksia helppoa, hauskaa ja ikimuistoista. Ja käytettävissä on useita erilaisia ​​työkaluja ja lähestymistapoja CSS-animaatio tekniikoita käyttäen bootstrap tai html.

Animaatio käyttöliittymien yhteydessä on edelleen hyvin uusi kenttä. Siellä ei ole paljon resursseja, jotka opettavat parhaita käytäntöjä tai näyttävät yhteisiä UI-animaatiota, jota voimme seurata. Suurimman osan ajasta, se koskee kokeilua, Käyttäjän testaus Ja ehkä vähän kokeilua ja virheitä.

• 15 RECATIVE WEB Design Tutorials

Joten tässä opetusohjelmassa luomme jotain, joka ei hämmentää, seuraa yhteisiä malleja ja on tyylikäs. Tämä on Team Profile -osio, jonka näet usein yritysten verkkosivuilla. Ajatuksena on näyttää hieman tietoa joukkue / henkilökunnan jäsenestä, kun kukin on levitetty. Koko opetusohjelmassa käytämme Codepenin, mutta tietenkin voit käyttää omaa suosikki editoria ja kehitysympäristöä. Muista, että monimutkaisempi sivusto voi muuttaa sivujen ylläpito Tarvitsee siten, että sinulla on palvelu, joka toimii sinulle.

Haluatko suoraviivainen työkalu sivustosi tekemiseen? Käytä loistavaa Verkkosivuston rakentaja .

01. Hanki käyttöön

Aloita avaamalla koodi ja luo uusi kynä. Aiomme käyttää BootStrap 4: tä 4 ja Sassia (.SSS), joten varmista, että asetuksissa sisällytetään BootStrap CSS ja JS resurssien linkkiin ja aseta myös CSS: n SCS: iin. Toinen resurssiyhteys, jonka tarvitset, on fontti mahtava, jota käytämme sosiaalisia kuvakkeita.

02. Luo säiliöitä, rivejä ja sarakkeita

Säiliöt ovat mitä bootstrap käyttää sen perusasennuksen elementtina ja niitä tarvitaan, kun käytät oletusverkkojärjestelmää. Säiliöissä sinun on lisättävä riviin. Rivit ovat kääreitä sarakkeille ja voit määrittää sarakkeiden määrän, jotka haluat pois mahdollisesta 12 ja mikä katkaisupiste on. Meidän tapauksessamme haluamme elementin, jolla on keskikokoinen katkaisupiste ja täyttää kolme leveyden kolmen sarakkeen.

 & lt; div luokka = "kontti" & gt;
 & lt; div luokka = "rivi" & gt;
 & lt; div luokka = "COL-MD-3" & GT;
 & lt;! - Lisää kuva linkki ja väri täällä
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Aseta profiilikuva ja väri

Ensimmäinen profiili UI-elementti alkaa olla naispuolinen joukkueen jäsen ja hän on osa sinistä tiimiä. Väri määritellään käyttämällä sinistä, ja todellinen väri lopulta määritellään käyttäen SASS-muuttujia, joita teemme myöhemmässä vaiheessa. Sitten meidän on lisättävä kuva ja antaa sille luokan nimeltä kuva.

 & lt; div luokka = "Team Blue" & GT;
    & lt; div luokka = "kuva" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Lisää profiilin nimi ja nimi

Lisätään viimeinen html-bitti, joka lisätään nimi, otsikko ja sosiaaliset kuvakkeet, jotka lisätään viimeisen div-tunnuksen alla, jonka olemme juuri lisänneet viimeisessä vaiheessa. Sosiaalisille kuvakkeille käytämme Font Awesome ja nämä sijoitetaan järjestämättömään luetteloon.

 & lt; div luokka = "profiili-txt" & gt;
      & lt; h1 class = "otsikko" & gt; libby & lt; / h1 & gt;
      & lt; span class = "sijainti" & gt; web-suunnittelija & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "sosiaaliset kuvakkeet" & 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; a href = "" class = "fa fa-dribbble" & gt; & lt; / a & gt; & lt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Aseta SASS-muuttujat

Jos seuraavat koodien käyttäminen, sinulla on jo Sass asennettu ja valmiina mennä. Sinun tarvitsee vain klikata kynän asetukset -kuvaketta / -painiketta ja valitse SCSS CSS-esikäsittelysi. Sitten voimme mennä eteenpäin ja lisätä joitakin muuttujia, jotka tallentavat kaikki värit. Olemme käyttäneet RGBA: ta väriarvona, jotta meille olisi mielekäs hallinta kaikkia värejä läpinäkyvyyttä.

 $ 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);
$ Blue: RGBA (80, 205, 227, 1);
$ Blue-border: RGBA (147, 223, 236, 1); 

06. Lataa taustakuva

Jotta asiat näyttävät houkuttelevilta, asetamme mukavan taustakuvan keholle. Täällä voimme käyttää ensimmäistä muuttujamme ja antaa taustakuvan miellyttävä gradient-peittokuva, joka menee vaaleanvihreältä siniseen. Sitten tehdä taustakuvasi täysin reagoivaksi, asetamme näkymän korkeus 100vh: ksi.

 elin {
 Taustaa: Linear-gradientti (oikealle, $ Lightgreen, $ BlueGradient), URL ('https://image.ibb.co/mdpu7/clouds_cornfield_countryside_158827.jpg') Center Ei-toisto;
 Tausta-koko: kansi;
 Asento: Suhteellinen;
 Korkeus: 100vh;
 } 

07. Valitse profiilin tausta ja kuva

Jokaiselle ryhmäprofiilille annetaan samat tyylejä ja luokkatiimiä käytetään tähän. Tausta on valkoinen, kaikki sisällön keskitetty ja meidän on varmistettava, että sijainti on asetettu suhteelliseen. Sitten voimme sisällyttää CSS: n profiilikuvalle. Parhaan tuloksen varmistamiseksi Varmista, että käytät alkuperäistä kuvaa, jonka käytät, on mitat eivät ole suurempia kuin 200px neliö. Muutamme kuitenkin näiden korkeuden ja leveyden valokuvan CSS-sääntöön.

 .Team {
 Padding: 30px 0 40px;
 marginaali: 60px;
 Tausta: #FFF;
 Teksti-kohdistus: keskus;
 ylivuoto piilotettu;
 Asento: Suhteellinen;
 kohdistin: osoitin;
 laatikko-varjo: 0 0 25px 1px RGBA (0,0,0,0,3);
 .photo {
 Näyttö: Inline-lohko;
 Leveys: 130px;
 Korkeus: 130px;
 Margin-pohja: 50px;
 Asento: Suhteellinen;
 Z-indeksi: 1;
 }
 } 

08. Lisää animaatiot

Ensimmäinen animaatio, jonka lisäämme, on profiilisivun yläosassa. Ajatuksena on, että kun siirrämme koko elementin, sininen pyöreä muoto animoivat alas. Voimme hallita, kuinka paljon sinistä voimme nähdä määrittelemällä tämän sijainnin, jolla on pohjaprosentti. Joten pelaa tämän prosenttiosuuden kanssa ja saat paremman käsityksen siitä, miten tämä toimii. Et koskaan tiedä: saatat jopa löytää paremman vaikutuksen!

 .Blue .Photo: Ennen {
 sisältö: "";
 Leveys: 100%;
 Korkeus: 0px;
 Raja-RADIUS: 50%;
 Tausta: $ sininen;
 Asema: Absoluuttinen;
 Pohja: 130%;
 Oikea: 0;
 Vasen: 0;
 Muunna: asteikko (3);
 Siirtyminen: Kaikki .3S Linear 0s;
}
.Team: Hover .photo: ennen {
 Korkeus: 100%;
} 

09. Animoi tiimikuva

Tiimin kuva on meidän keskipiste tässä käyttöliittymässä ja on luultavasti ilmeisin elementti, jonka odotat animoivan jonkinlaisessa muodossa tai muodossa. CSS: t, jotka lisätään tähän vaiheeseen, kääntävät ensin valokuvan pienempään ympyrään, kun se leijuu siellä, se on vaaleansininen raja, ja valokuva laajasti alaspäin rajalla. Lisättyjen siirtymien avulla saamme mukavan nesteen animaation.

 .blue .pic: jälkeen {
 sisältö: "";
 Leveys: 100%;
 Korkeus: 100%;
 Raja-RADIUS: 50%;
 Tausta: $ sininen;
 Asema: Absoluuttinen;
 Top: 0;
 Vasen: 0;
 Z-indeksi: 1;
}
.Team .photo img {
 Leveys: 100%;
 Korkeus: auto;
 Raja-RADIUS: 50%;
 Muunna: asteikko (1);
 Siirtyminen: Kaikki 0,9: n helppous 0s;
}
.Blue: Hover .photo img {
 Box-Shadow: 0 0 0 14PX $ Blue-Border;
 Muunna: asteikko (0,6);
 }

10. Määritä profiilin nimi ja sijainti

Profiilin nimi ja sijainti tarvitsevat hieman siistinä. Näitä ei tule animoituna, mutta se ei saisi lopettaa sinua lisäämästä omaa animaatioasi näihin, jos haluat. Ehkä skaalaa ne hieman leijua, sillä sinulla on tarpeeksi tilaa kuvan kokoa.

 .profile-txt {
 Margin-pohja: 30px;
 .Title {
 Fontti-koko: 2rem;
 fonttipaino: 700;
 Väri: # 333;
 Kirjainvälitys: 1.5px;
 Teksti-muunnos: hyödyntää;
 Margin-pohja: 6px;
 }
 .position {
 Näyttö: Block;
 Fontti-koko: 1rem;
 Väri: # 555;
 }
} 

11. Lisää sosiaaliset kuvakkeet

Sosiaaliset kuvakkeet sijoitetaan ensin sivun alareunasta -100px: llä. Sitten kun siirrämme sen päälle, pohja-asema asetetaan nollaan ja siirtymä lisätään, tämä antaa meille mukavan sileän animaation, koska se siirtyy takaisin näkymään. Kuvakkeet annetaan omalle hover-tilalleen, asettamalla taustansa valkoiseksi ja siniseksi kuvakkeeksi.

 .Blue .Social-kuvakkeet {
 Leveys: 100%;
 List-Style: Ei mitään;
 Pehmuste: 0;
 Marginaali: 0;
 Tausta: $ sininen;
 Asema: Absoluuttinen;
 pohja: -100px;
 Vasen: 0;
 Siirtyminen: Kaikki 0,6: n helppous;
 li {
 Näyttö: Inline-lohko;
 
 {
 Näyttö: Block;
 Pehmuste: 8PX;
 Fontti-koko: 1rem;
 Väri: #FFF;
 Tekstisuunnittelu: Ei mitään;
 Siirtyminen: Kaikki 0,5-luvun helppous;
 & amp;: Hover {
 Väri: $ Blue;
 Tausta: #FFF;
 }
 }
 }
}
.Team: Hover .Social-kuvakkeet {
 Pohja: 0px;
} 

12. Tee vihreän tiimin jäsen

Jos haluat sekoittaa asioita hieman, voimme alkaa lisätä jäseniä tiimimme. Väri, jota käytämme tämän seuraavan, on vihreä. Mutta ensin palata HTML-osioon / tiedostoon ja kaikki meidän on tehtävä, kopioi COL-MD-3-luokka - ei rivi - alas viimeiseen div-tunnisteeseen sosiaalisten kuvakkeiden alla ja liitä se sisään.

 & lt; div luokka = "Team Green" & GT;
 & lt; div luokka = "kuva" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Kun olet muuttanut sinistä luokkaa vihreään, voimme vihdoin lisätä kaikkiin CSS: hen, jotka antavat meille saman animaation.

 .Green: Hover .photo img {
 Laatikko-varjo: 0 0 0 14 € $ vihreä;
 Muunna: asteikko (0,6);
 }
.green .photo: ennen {
 sisältö: "";
 Leveys: 100%;
 Korkeus: 0px;
 Raja-RADIUS: 50%;
 Taustaa: $ Green;
 Asema: Absoluuttinen;
 Pohja: 135%;
 Oikea: 0;
 Vasen: 0;
 Muunna: asteikko (3);
 Siirtyminen: Kaikki .3S Linear 0s;
}
.green .Social-kuvakkeet {
 Leveys: 100%;
 List-Style: Ei mitään;
 Pehmuste: 0;
 Marginaali: 0;
 Taustaa: $ Green;
 Asema: Absoluuttinen;
 pohja: -100px;
 Vasen: 0;
 Siirtyminen: Kaikki 0,6: n helppous;
 li {
 Näyttö: Inline-lohko;
 {
 Näyttö: Block;
 Pehmuste: 8PX;
 Fontti-koko: 1rem;
 Väri: #FFF;
 Tekstisuunnittelu: Ei mitään;
 Siirtyminen: Kaikki 0,5-luvun helppous;
 & amp;: Hover {
 Väri: $ vihreä;
 Tausta: #FFF;
 }
 }
 }
} 

Ja tämän lähestymistavan kauneus on se, että voit toistaa tarvitaan monien eri väriluokkiin edellyttämällä tavalla, jotta voit hienosäätää teemaa UI-animaatiosi tarpeen mukaan.

Jos rakennat sivuston joukkueen, varmista, että saat luotettavan, turvallisen pilvivarasto pitää asiat yhtenäisenä.

Tämä artikkeli julkaistiin alun perin 307: ssä netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 307 tai Tilaa Net .

Haluatko lisätietoja UI-animaation insinistä ja ulkoista?

Jos olet kiinnostunut oppimaan lisää siitä, miten voit tehdä sivustosi Pop ja Sparkle käyttäen tyylikäs UI-animaatiota, varmista, että olet ottanut lippusi Luo Lontoo .

Etupään suunnittelija ja kehittäjä työskentelevät tällä hetkellä Creative Developer ASEMBLR.comissa, Steven Roberts toimittaa puheenvuoronsa - CSS-animaatiot: siirtymien jälkeen -, jossa hän näyttää sinulle parhaat työkalut työhön ja luodaan joitakin parhaita animaatioita Verkko on tarjottava samalla, kun havaitsee mahdollisuuksia ja rajoituksia vain CSS: n animointiin.

Luo Lontoo järjestetään 19.-21. Syyskuuta 2018. Hanki lippu nyt .

Aiheeseen liittyvät artikkelit:

• Kuinka käyttää animaatiota mobiilisovelluksissa
• Pro: n opas UI-suunnittelulle
• Aloittelijan opas käyttöliittymän animaatioiden suunnitteluun