Skapa Slick UI-animationer

Mer och oftare bekräftar designers och utvecklare vikten av rörelsesign i samband med användarupplevelse . Animering på webben är inte längre ett sätt att glädja och wow användaren men ett funktionellt verktyg som gör erfarenheter lätt, roligt och minnesvärt. Och det finns ett antal olika verktyg och tillvägagångssätt tillgängliga, från CSS-animering till tekniker med hjälp av bootstrap eller html.

Animering i samband med användargränssnitt är fortfarande ett mycket nytt fält. Det finns inte många resurser där ute som lär sig bästa praxis eller visa vanliga mönster av UI-animering som vi kan följa. Det mesta av tiden handlar det om experiment, användartestning Och kanske lite försök och fel.

• 15 Responsive Web Design Tutorials

Så i den här handledningen skapar vi något som inte förvirrar, följer gemensamma mönster och är elegant. Detta kommer att vara lagprofilsektionen som du ofta ser på företags webbplatser. Tanken är att visa lite mer information om laget / anställd när var och en svävar över. Under hela handledningen använder vi CODEPEN, men kan du självklart använda din egen favoritredaktör och utvecklingsmiljö istället. Kom ihåg att skapa en mer komplex sida kan ändra din webbhotell Behov, så var noga med att du har en tjänst som fungerar för dig.

Vill du ha ett enkelt verktyg för att göra en webbplats? Använd en lysande Website Builder .

01. Få satt upp

Börja med att öppna Codepen och skapa en ny penna. Vi kommer att använda Bootstrap 4 och Sass (.scss), så se till att du i de inställningar du innehåller Bootstrap CSS och JS som dina resurslänkar och också ställa in CSS till SCSS. En annan resursförbindelse du måste lägga till är font awesome, som vi kommer att använda för våra sociala ikoner.

02. Skapa behållare, rader och kolumner

Containrar är vad Bootstrap använder som det grundläggande layoutelementet och de är nödvändiga när du använder standardnätsystemet. Inom behållare måste du lägga till i rad. Rader är förpackningar för kolumner och du kan ange antalet kolumner som du vill ha av en möjlig 12 och vad brytpunkten kommer att vara. I vårt fall vill vi ha ett element som har en medelstor brytpunkt och fyller tre kolumner i bredd.

 & lt; div class = "container" & gt;
 & lt; div klass = "rad" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Lägg till bildlänk och färg här
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Ange profilbild och färg

Det första profilen UI-elementet vi börjar med kommer att vara för en kvinnlig lagmedlem och hon kommer att vara en del av det blå laget. Färgen kommer att anges med en klass som kallas blå och den faktiska färgen kommer så småningom att definieras med SASS-variabler, som vi ska göra i ett senare steg. Då måste vi lägga till i ett foto och ge det en klass som heter 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. Lägg till profilnamn och titel

Den sista biten av HTML som ska läggas till kommer att vara för namn, titel och sociala ikoner, som kommer att läggas under den sista div-taggen som vi bara lagt till i det sista steget. För de sociala ikonerna kommer vi att använda font fantastiskt och de kommer att placeras inom en oorderad lista.

 & lt; div class = "profil-txt" & gt;
      & lt; H1 Class = "Titel" & GT; Libby & LT; / H1 & GT;
      & lt; span class = "position" & gt; webbdesigner & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul klass = "Social-ikoner" & GT;
       & LT; Li & GT; & LT; en href = "" klass = "FA FA-FACEBOOK" & GT; / LT; ​​/ A & GT;
       & lt; li & gt; & lt; a href = "" class = "fa fa-twitter" & lt; / lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" klass = "fa fa-linkedin" & lt; / lt; / a & gt; & lt; / li & 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. Ställ in sassvariabler

Om du följer med CODEPEN, har du redan SASS installerad och redo att gå. Du behöver bara klicka på ikonen för penninställningar och välj SCSS som din CSS-preprocessor. Då kan vi fortsätta och lägga till några variabler som lagrar alla våra färger. Vi har använt RGBA som färgvärden för att tillåta oss mer meningsfull kontroll över alla färgernas opacitet.

 $ Bluegradient: RGBA (103, 188, 223 ,,8);
$ lightgreen: RGBA (188, 219, 183, .5);
$ grön: RGBA (119, 180, 109, 0,5);
$ gröngräns: RGBA (171, 221, 164, 0,5);
$ blå: RGBA (80, 205, 227, 1);
$ blågräns: RGBA (147, 223, 236, 1); 

06. Ladda upp en bakgrundsbild

För att få saker att se mer tilltalande, kommer vi att placera en fin bakgrundsbild på kroppen. Här kan vi använda vår första uppsättning variabler och ge bakgrundsbilden ett tilltalande gradientöverlagring som går från ljusgrönt till blått. Sedan för att göra vår bakgrundsbild fullt lyhörd, kommer vi att ställa in vynhöjden till 100VH.

 kropp {
 Bakgrund: Linjär-gradient (till höger, $ lightgreen, $ bluegradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Center no-repeat;
 Bakgrundsstorlek: Skydd;
 position: släkting;
 Höjd: 100VH;
 } 

07. Välj en profil bakgrund och bild

Varje lagprofil kommer att ges samma stilar och klasslaget kommer att användas för detta. Bakgrunden blir vit, allt innehåll centrerat och vi måste se till att positionen är inställd på relativ. Då kan vi inkludera CSS för profilbilden. För bästa resultat, se till att den ursprungliga bilden du använder har dimensioner inte större än 200px-torget. Men vi kommer att ändra höjden och bredden av dessa inom fotokrets regel.

 .Team {
 Padding: 30px 0 40px;
 Margin-top: 60px;
 Bakgrund: #fff;
 Text-Justera: Center;
 Överflöde: Dold;
 position: släkting;
 markör: pekare;
 Box-Shadow: 0 0 25px 1px rgba (0,0,0,0,3);
 .Foto {
 Visa: Inline-block;
 Bredd: 130px;
 Höjd: 130px;
 Marginal-Bottom: 50px;
 position: släkting;
 Z-Index: 1;
 }
 } 

08. Lägg till animationerna

Den första animationsdelen vi kommer att lägga till kommer att vara högst upp i vårt profilelement. Tanken är att när vi svävar över hela elementet, kommer en blå cirkulär form att animera ner. Vi kan styra hur mycket av det blå vi kan se genom att ange positionen för detta för att ha en bottenprocent. Så leka med den här procenten och du får en bättre uppfattning om hur det fungerar. Du vet aldrig: Du kan till och med upptäcka en bättre effekt!

 .Blue .Photo: före {
 innehåll: "";
 Bredd: 100%;
 Höjd: 0px;
 Border-Radius: 50%;
 Bakgrund: $ blå;
 position: absolut;
 Bottom: 130%;
 rätt: 0;
 Vänster: 0;
 Transform: Skala (3);
 Övergång: Alla .3s linjära 0s;
}
.Team: Hover .Photo: före {
 Höjd: 100%;
} 

09. Animera lagfotoet

Team Photo är vår kontaktpunkt i denna UI och är förmodligen det mest uppenbara elementet som du förväntar dig att animera i någon form eller form. CSS vi lägger till i detta steg kommer först att vända bilden till en mindre cirkel, då när den svävar därifrån kommer en ljusblå gräns till den och fotot kommer att skala ner tillsammans med gränsen. Med de tillsatta övergångarna får vi en fin vätska animering.

 .Blue .Pic: efter {
 innehåll: "";
 Bredd: 100%;
 Höjd: 100%;
 Border-Radius: 50%;
 Bakgrund: $ blå;
 position: absolut;
 Topp: 0;
 Vänster: 0;
 Z-Index: 1;
}
.Team .Photo img {
 Bredd: 100%;
 Höjd: Auto;
 Border-Radius: 50%;
 Transform: Skala (1);
 Övergång: Alla 0,9s lätt 0s;
}
.Blue: Hover. Photo img {
 Box-Shadow: 0 0 0 14px $ blågräns;
 Transform: Skala (0,6);
 }

10. Tweak profilnamnet och positionen

Profilnamnet och positionen behöver lite städa upp. Dessa kommer inte att animeras men det borde inte hindra dig från att lägga till din egen animering till dessa om du vill. Kanske skala dem upp lite på sväska, eftersom du har tillräckligt med utrymme på grund av att fototrens storlek är.

 .profil-txt {
 Margin-botten: 30px;
 .title {
 FONT-STORLEK: 2REM;
 FONT-VIKT: 700;
 Färg: # 333;
 Brevavstånd: 1.5px;
 Text-transform: kapitalisera;
 Margin-botten: 6px;
 }
 .placera{
 Visa: Block;
 Typsnitt: 1rem;
 Färg: # 555;
 }
} 

11. Lägg till sociala ikoner

De sociala ikonerna kommer först att placeras från botten av sidan med -100px. Då när vi svänger över det kommer bottenpositionen att ställas in till noll och med en övergång tillagd, kommer det att ge oss en fin jämn animering när den flyttas upp i sikte. Ikonerna kommer att ges sin egen sväska, ställa in sin bakgrund till vit och ikonen till blått.

 .Blue .Sociala-ikoner {
 Bredd: 100%;
 Lista-stil: Ingen;
 Padding: 0;
 Marginal: 0;
 Bakgrund: $ blå;
 position: absolut;
 botten: -100px;
 Vänster: 0;
 Övergång: Alla 0.6 är lätt;
 li {
 Visa: Inline-block;
 
 a {
 Visa: Block;
 Padding: 8px;
 Typsnitt: 1rem;
 Färg: #fff;
 Textdekoration: Ingen;
 Övergång: Alla 0,5-filer;
 & amp;: Hover {
 Färg: $ blå;
 Bakgrund: #fff;
 }
 }
 }
}
.Team: Hover. Sociala-ikoner {
 Bottom: 0px;
} 

12. Gör den gröna lagmedlemmen

För att blanda saker lite, kan vi börja lägga till fler medlemmar till vårt team. Den färg vi använder för den här nästa kommer att vara grön. Men först gå tillbaka till HTML-sektionen / filen och allt vi behöver göra är att kopiera COL-MD-3-klassen - inte raden ner till den sista div-taggen under de sociala ikonerna och klistra in den.

 & lt; div class = "Team Green" & GT;
 & lt; div class = "Photo" & gt;
 & lt; img src = "https://image.ibb.co/mprls/mick_ui.jpg" alt = "Libby" & GT;
 & lt; / div & gt; 

När du har ändrat den blå klassen till grön, kan vi äntligen lägga till i alla CSS som ger oss samma animering.

 .Green: Hover .Photo img {
 Box-Shadow: 0 0 0 14px $ gröngräns;
 Transform: Skala (0,6);
 }
.Green .Photo: före {
 innehåll: "";
 Bredd: 100%;
 Höjd: 0px;
 Border-Radius: 50%;
 Bakgrund: $ grön;
 position: absolut;
 botten: 135%;
 rätt: 0;
 Vänster: 0;
 Transform: Skala (3);
 Övergång: Alla .3s linjära 0s;
}
.Green .Sociala-ikoner {
 Bredd: 100%;
 Lista-stil: Ingen;
 Padding: 0;
 Marginal: 0;
 Bakgrund: $ grön;
 position: absolut;
 botten: -100px;
 Vänster: 0;
 Övergång: Alla 0.6 är lätt;
 li {
 Visa: Inline-block;
 a {
 Visa: Block;
 Padding: 8px;
 Typsnitt: 1rem;
 Färg: #fff;
 Textdekoration: Ingen;
 Övergång: Alla 0,5-filer;
 & amp;: Hover {
 Färg: $ grön;
 Bakgrund: #fff;
 }
 }
 }
} 

Och skönheten i detta tillvägagångssätt är att du kan upprepa efter behov för många olika färgklasser, så att du kan subtilt tema dina UI-animeringar som krävs.

Om du bygger en webbplats med ett lag, se till att du blir pålitlig, säker molnlagring för att hålla sakerna sammanhängande.

Denna artikel publicerades ursprungligen i utgåva 307 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp utgåva 307 eller Prenumerera på nätet .

Vill du lära dig mer om Ins and Outs av UI-animering?

Om du är intresserad av att lära dig mer om hur du kan göra dina webbplatser pop och gnista med hjälp av elegant ui-animering, se till att du har tagit upp din biljett till Generera london .

En front-end-designer och utvecklare som för närvarande arbetar som kreativ utvecklare för Asemblr.com, kommer Steven Roberts att leverera sitt talk - CSS-animering: Utöver övergångar - där han kommer att visa dig de bästa verktygen för jobbet och återskapa några av de bästa animationerna Webben har att erbjuda, samtidigt som man upptäcker möjligheterna och begränsningarna för att animera med bara CSS.

Generera London äger rum från 19-21 september 2018. Få din biljett nu .

Relaterade artiklar:

• Hur man använder animering i mobila appar
• Pro's Guide till UI-design
• En nybörjare guide till design av gränssnitt animationer