Slick UI animációk létrehozása

Egyre gyakrabban a tervezők és a fejlesztők elismerik a mozgás kialakításának fontosságát a felhasználói tapasztalat . Az animáció az interneten már nem egy módja annak, hogy örömmel és a felhasználót, hanem olyan funkcionális eszközt, amely könnyű, szórakoztató és emlékezetes. És számos különböző eszköz és megközelítés létezik CSS animáció a bootstrap vagy a html technikáihoz.

Az animáció a felhasználói felületek összefüggésében még mindig nagyon új mező. Nincs olyan erőforrás, amely megtanítja a legjobb gyakorlatot, vagy megmutatja az UI animáció közös mintázatát, amelyet követhetünk. A legtöbb idő, ez a kísérletezésről van szó, Felhasználói tesztelés és talán egy kis próba és hiba.

• 15 Responsive Web Design oktatóanyagok

Tehát ebben a bemutatóban megteremtünk valamit, ami nem zavarja, követi a szokásos mintákat és stílusos. Ez lesz a csapat profilszakasz, amelyet gyakran látsz a vállalati webhelyeken. Az elképzelés az, hogy egy kicsit több információt mutatta a csapat / személyzet tagja, amikor mindegyik lebegett. A bemutató során a CODEPEN-t használjuk, de természetesen használhatja saját kedvenc szerkesztőjét és fejlesztési környezetét. Ne feledje, hogy összetettebb webhelyet hozhat létre web hosting Szüksége van rá, hogy van-e olyan szolgáltatása, amely az Ön számára működik.

Szeretne egy egyszerű eszközt egy webhely készítéséhez? Használjon ragyogó weboldal építője .

01. Szerezd meg a beállításokat

Kezdje, hogy megnyitja a kódot és létrehoz egy új tollat. A Bootstrap 4-et és a SASS-t (.sss-eket) fogjuk használni, ezért győződjön meg róla, hogy a Beállításokon belül a Bootstrap CSS és a JS-t az erőforrás-linkekként tartalmazza, és a CSS-t SCSS-re is beállíthatja. Egy másik erőforrás-link hozzá kell adnia a betűtípus félelmetes, amelyet a társadalmi ikonokért fogunk használni.

02. Konténerek, sorok és oszlopok létrehozása

A konténerek az, amit a bootstrap az alapvető elrendezési elemként használ, és az alapértelmezett rácsrendszer használata esetén szükséges. A konténereken belül hozzá kell adnia egy sorba. A sorok az oszlopok csomagolása, és megadhatja azokat az oszlopok számát, amelyeket egy lehetséges 12 és a töréspont lesz. A mi esetünkben olyan elemet akarunk, amely közepes méretű törésponttal rendelkezik, és három oszlopot tölt be szélességben.

 & lt; div osztály = "konténer" & gt;
 & lt; div osztály = "sor" & gt;
 & lt; div osztály = "COL-MD-3" & gt;
 & lt;! - Kép link és színes hozzáadása itt
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Állítsa be a profilképet és a színt

Az első profil UI elem, amit elkezdünk, egy női csapat tagja lesz, és része lesz a kék csapatnak. A színt egy kék néven, és a tényleges színt végül a SASS változók segítségével határozzák meg, amelyeket későbbi lépésben fogunk tenni. Ezután hozzá kell adnunk egy fotót, és adunk egy osztály nevű fotót.

 & lt; div osztály = "Team Blue" & gt;
    & lt; div osztály = "fotó" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Profilnév és cím hozzáadása

A hozzáadandó HTML utolsó bitje a név, a cím és a szociális ikonok, amelyeket az utolsó lépésben hozzáadott utolsó DIV-címke alatt adunk hozzá. A szociális ikonok esetében a betűtípust félelmetes fogjuk használni, és ezeket egy rendezetlen listán belül helyezzük el.

 & lt; div osztály = "profil-txt" & gt;
      & lt; h1 class = "Cím" & gt; libby & lt; / h1 & gt;
      & lt; span class = "pozíció" & gt; web designer & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "Social-Icons" & gt;
       & li & gt; & lt; egy href = "" osztály = "fa fa-facebook" & gt; & lt; / a & gt; / li & gt;
       & li & gt; egy href = "" osztály = "fa fa-twitter" & gt; & lt; / a & gt; & lt; / li & gt;
       & li & gt; & lt; egy href = "" osztály = "fa fa-linkedin" & gt; & lt; / a & gt; & lt; / li & gt;
       & li & gt; egy href = "" osztály = "fa fa-dribbleble" & gt; & lt; / a & gt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Állítsa be a Sass változókat

Ha követi a Codepen használatával, akkor már telepített, és készen áll a menni. Csak meg kell kattintania a tollbeállítások ikonjára / gombra, és válassza az SCSS-t, mint a CSS preprocesszorát. Ezután eljuthatunk, és hozzáadhatunk néhány változót, amelyek az összes színünket tárolják. Az RGBA-t használtuk, mint a színértékek, amelyek lehetővé teszik számunkra az összes színteljesítményű opacitást.

 $ bluegradient: RGBA (103, 188, 223, 0,8);
$ Lightgreen: RGBA (188, 219, 183, 0,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. Töltsön fel háttérképet

Ahhoz, hogy a dolgok vonzóbbá váljanak, egy szép háttérképet fogunk elhelyezni a testre. Itt használhatjuk az első változókészletünket, és a háttérkép egy kellemes gradiens overlay-t adhatunk, amely világos zöldtől kékre megy. Akkor, hogy a háttérkép teljesen érzékeny legyen, akkor a nézet magassága 100VH-ra állítható.

 test {
 háttér: lineáris gradiens (jobbra $ világoszöld, $ blueGradient), url ( 'https://image.ibb.co/mdDPU7/clouds_cornfield_countryside_158827.jpg) központjában no-repeat;
 Háttér méret: fedél;
 Pozíció: relatív;
 Magasság: 100VH;
 } 

07. Válasszon egy profilt és képet

Minden egyes csapatprofil ugyanazokat a stílusokat kapja, és az osztálycsoportot erre használják. A háttér fehér lesz, minden tartalomközpontú, és meg kell győződnünk arról, hogy a pozíció hozzátartozik. Ezután tartalmazhatunk a profilkép CSS-jét. A legjobb eredmény érdekében győződjön meg róla, hogy az Ön által használt eredeti kép nem nagyobb, mint 200px négyzet. Azonban megváltoztatjuk ezek magasságát és szélességét a Photo CSS szabályban.

 .Team {
 Padding: 30px 0 40px;
 Margin-Top: 60px;
 Háttér: #FFF;
 Text-Align: Center;
 túlcsordulás: rejtett;
 Pozíció: relatív;
 kurzor: mutató;
 doboz-árnyék: 0 0 25px 1px RGBA (0,0,0,0,3);
 .Photo {
 Kijelző: inline-blokk;
 Szélesség: 130px;
 Magasság: 130px;
 Margó alsó: 50px;
 Pozíció: relatív;
 Z-index: 1;
 }
 } 

08. Adja hozzá az animációkat

Az első olyan animáció, amelyet hozzáadunk, a profilelemünk tetején leszünk. Az ötlet az, hogy amikor az egész elem fölé mozdulunk, egy kék kör alakú alakja animálódik. Vezéríthetjük, hogy a kék mennyire láthatjuk, hogy meghatározzuk ennek pozícióját, hogy egy alsó százalékot kapjunk. Tehát játsszon ezzel a százalékkal, és jobb ötletet kapsz arról, hogy ez hogyan működik. Soha nem tudod: lehet, hogy még jobb hatást is felfedezhetsz!

 .blue .photo: előtt {
 tartalom: "";
 Szélesség: 100%;
 Magasság: 0px;
 Border-sugara: 50%;
 Háttér: $ Blue;
 Pozíció: abszolút;
 Alul: 130%;
 Jobb: 0;
 Bal: 0;
 Átalakítás: skála (3);
 Átmenet: ALL .3S LINEAR 0S;
}
.Team: Hover .Photo: előtt {
 Magasság: 100%;
} 

09. Animálja a csapat fotót

A csapat fotó a fókuszpontunk ebben az UI-ben, és valószínűleg a legnyilvánvalóbb elem, amelyet elvárnánk, hogy valami formában vagy formában animáljon. A CSS fogunk hozzá az ebben a lépésben először kapcsolja be a fénykép egy kisebb kört, majd amikor lebegett lesz egy világoskék határ hozzá és a fotó kicsinyíteni együtt a határon. A hozzáadott átmenetekkel egy szép folyékony animációt kapunk.

 .blue .pic: után {
 tartalom: "";
 Szélesség: 100%;
 Magasság: 100%;
 Border-sugara: 50%;
 Háttér: $ Blue;
 Pozíció: abszolút;
 Top: 0;
 Bal: 0;
 Z-index: 1;
}
.Team .photo img {
 Szélesség: 100%;
 Magasság: Auto;
 Border-sugara: 50%;
 Átalakítás: skála (1);
 Átmenet: Minden 0.9-es könnyebb 0s;
}
.blue: Hover .Photo img {
 doboz-árnyék: 0 0 0 14px $ Blue-Border;
 Átalakítás: skála (0,6);
 }

10. Csúsztassa a profil nevét és pozícióját

A profil neve és pozíciójának szüksége van egy kis szagolásra. Ezek nem lesznek animált, de ez nem akadályozhatja meg a saját animáció hozzáadását, ha szeretné. Talán enyhén csökkenti őket a lebegésre, mivel elegendő hely lesz a kép átméretezése miatt.

 .Profile-txt {
 margó alsó: 30px;
 .title {
 betűméret: 2REM;
 betűtípus: 700;
 Szín: # 333;
 Letter-Távolság: 1.5px;
 szöveg-transzformáció: kihasználva;
 margó alsó: 6px;
 }
 .pozíció{
 Kijelző: blokk;
 Betűméret: 1REM;
 Szín: # 555;
 }
} 

11. Add hozzá a szociális ikonokat

A szociális ikonok először az oldal alján vannak -100px szerint. Aztán amikor lebegünk, az alsó pozíció nullára van beállítva, és egy átmenetet adunk hozzá, ez egy szép sima animációt ad nekünk, mivel visszafelé mozog. Az ikonok saját lebegő állapotukat kapják, háttérüket fehérre és az ikonra kékre.

 .blue .social-ikonok {
 Szélesség: 100%;
 Lista-stílus: Nincs;
 Padding: 0;
 Margó: 0;
 Háttér: $ Blue;
 Pozíció: abszolút;
 alsó: -100px;
 Bal: 0;
 Átmenet: mind a 0,6S könnyebb;
 Li {
 Kijelző: inline-blokk;
 
 A {
 Kijelző: blokk;
 Padding: 8px;
 Betűméret: 1REM;
 Szín: #FFF;
 Szöveges dekoráció: nincs;
 Átmenet: mind a 0,5S könnyebb;
 & amp;: Hover {
 Szín: $ Blue;
 Háttér: #FFF;
 }
 }
 }
}
.Team: Hover .social-ikonok {
 alsó: 0px;
} 

12. Készítse el a zöld csapattagot

Ahhoz, hogy egy kicsit keverje össze a dolgokat, elkezdhetünk hozzáadni több tagot a csapatunknak. A következő színt fogjuk használni, zöld lesz. De először menj vissza a HTML részben / fájlt, és minden meg kell tennie, hogy másolja a col-MD-3 osztály - nem a sor - egészen az utolsó div tag mellett a szociális ikonok, és illessze be.

 & lt; div osztály = "Team Green" & gt;
 & lt; div osztály = "fotó" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Miután megváltoztatta a kék osztályt zöldre, végül hozzá tudjuk adni az összes olyan CSS-t, amely ugyanazt az animációt adja nekünk.

 .green: Hover .Photo img {
 doboz-árnyék: 0 0 0 14px $ Green Border;
 Átalakítás: skála (0,6);
 }
.green .photo: előtt {
 tartalom: "";
 Szélesség: 100%;
 Magasság: 0px;
 Border-sugara: 50%;
 Háttér: $ Green;
 Pozíció: abszolút;
 Alul: 135%;
 Jobb: 0;
 Bal: 0;
 Átalakítás: skála (3);
 Átmenet: ALL .3S LINEAR 0S;
}
.green .social-ikonok {
 Szélesség: 100%;
 Lista-stílus: Nincs;
 Padding: 0;
 Margó: 0;
 Háttér: $ Green;
 Pozíció: abszolút;
 alsó: -100px;
 Bal: 0;
 Átmenet: mind a 0,6S könnyebb;
 li {
 Kijelző: inline-blokk;
 A {
 Kijelző: blokk;
 Padding: 8px;
 Betűméret: 1REM;
 Szín: #FFF;
 Szöveges dekoráció: nincs;
 Átmenet: mind a 0,5S könnyebb;
 & amp;: Hover {
 Szín: $ Green;
 Háttér: #FFF;
 }
 }
 }
} 

És ennek a megközelítésnek a szépsége az, hogy több különböző színosztály számára is megismételhető, lehetővé téve, hogy finoman tegye ki az UI animációit, amennyire szükséges.

Ha egy csapatot építesz, győződjön meg róla, hogy megbízható, biztonságos felhő tároló a dolgokat kohéziós.

Ezt a cikket eredetileg a 307. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. 307. kérdés megvásárlása vagy Feliratkozás a netre .

Szeretne többet megtudni az UI animáció injeiről és kimenetéről?

Ha érdekel, hogy többet tanulsz arról, hogyan lehet a webhelyeidet pop és szikrázni a Sleek UI animáció segítségével, győződjön meg róla, hogy felvette a jegyét London létrehozása .

A Front-End Designer és a fejlesztő jelenleg az Asemblr.com kreatív fejlesztőjeként dolgozik, Steven Roberts a Talk - CSS animációját fogja szállítani: átmeneteken túlmutató -, amelyben megmutatja a legjobb eszközöket a munkához és újjáépíteni néhány legjobb animációt A webnek meg kell adnia, miközben felfedezi az animálás lehetőségeit és korlátait csak CSS-vel.

London létrehozása 2018. szeptember 19-21. Most kapd meg jegyét .

Kapcsolódó cikkek:

• Hogyan kell használni animációt mobilalkalmazásokban
• A Pro útmutató az UI designhoz
• A kezdő útmutató az interfész animációk tervezéséhez