Maak gladde UI-animaties

Meer en vaker, erkenden ontwerpers en ontwikkelaars het belang van bewegingsontwerp in de context van gebruikerservaring ​Animatie op het web is niet langer een manier om de gebruiker te verrassen en te wauwen, maar een functionele tool die ervaringen gemakkelijk, leuk en gedenkwaardig maakt. En er zijn een aantal verschillende hulpmiddelen en benaderingen beschikbaar, van CSS-animatie naar technieken met bootstrap of html.

Animatie in de context van gebruikersinterfaces is nog steeds een heel nieuw veld. Er zijn er niet veel middelen die de beste praktijken leren of veel voorkomende patronen van UI-animatie laten zien die we kunnen volgen. Meestal gaat het om experimenteren, Gebruikers testen en misschien een beetje vallen en opstaan.

• 15 Responsive Web Design-tutorials

Dus in deze tutorial, zullen we iets creëren dat niet verwarren, veel voorkomende patronen en stijlvol is. Dit is het gedeelte Teamprofiel dat u vaak ziet op bedrijfswebsites. Het idee is om een ​​beetje meer informatie over het team / het personeelslid te tonen wanneer ze allemaal overhangen. Gedurende de tutorial zullen we COCEIPEN gebruiken, maar u kunt in plaats daarvan natuurlijk uw eigen favoriete editor- en ontwikkelingsomgeving gebruiken. Vergeet niet dat het creëren van een complexere site kan veranderen web hosting Behoeften, dus zorg dat je een service hebt die voor jou werkt.

Wilt u een eenvoudige tool voor het maken van een site? Gebruik een briljant website bouwer ​

01. Krijg op te zetten

Begin met het openen van Codepen en het creëren van een nieuwe pen. We gaan Bootstrap 4 en Sass (.scss) gebruiken, dus zorg ervoor dat binnen de instellingen die u de Bootstrap CSS en JS opneemt als uw resource-links en ook de CSS in SCSS instellen. Een andere bronverbinding die je moet toevoegen is lettertype geweldig, wat we zullen gebruiken voor onze sociale pictogrammen.

02. Maak containers, rijen en kolommen

Containers zijn wat Bootstrap gebruikt als zijn basislay-outelement en ze zijn vereist wanneer u het standaard rastersysteem gebruikt. Binnen containers moet u op een rij toevoegen. Rijen zijn wrappers voor kolommen en je kunt het aantal kolommen opgeven dat je wilt uit een mogelijke 12 en wat het breekpunt zal zijn. In ons geval willen we een element dat een middelgrote breekpunt heeft en drie kolommen in de breedte vult.

 & lt; div class = "container" & GT;
 & lt; div class = "rij" & GT;
 & LT; DIV-klasse = "COL-MD-3" & GT;
 & LT;! - Beeldkoppeling en kleur hier toevoegen
 & LT; / DIV & GT;
 & LT; / DIV & GT;
& lt; / div & gt; 

03. Set Profiel afbeelding en kleur

Het eerste profiel UI-element waarmee we beginnen, zullen voor een vrouwelijk teamlid zijn en ze zal deel uitmaken van het Blue-team. De kleur wordt gespecificeerd met behulp van een klasse Blue en de werkelijke kleur zal uiteindelijk worden gedefinieerd met Sass-variabelen, die we in een latere stap doen. Dan zullen we een foto moeten toevoegen en het een klasse genaamd foto geven.

 & lt; div class = "Teamblauw" & GT;
    & lt; div class = "foto" & GT;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & GT;
     & LT; / DIV & GT;
& lt; / div & gt; 

04. Profielnaam en titel toevoegen

Het laatste stukje HTML dat moet worden toegevoegd, is voor de naam, titel en sociale pictogrammen, die onder de laatste div-tag worden toegevoegd die we net hebben toegevoegd in de laatste stap. Voor de sociale pictogrammen zullen we lettertype geweldig gebruik maken en deze worden binnen een ongeordende lijst geplaatst.

 & lt; div class = "profiel-txt" & GT;
      & LT; H1 Class = "Titel" & GT; Libby & LT; / H1 & GT;
      & lt; span class = "positie" & GT; Web Designer & LT; / Span & GT;
   & LT; / DIV & GT;
          & LT; UL-klasse = "Social-Icons" & 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 = "" klasse = "Fa-LinkedIn" & GT; & LT; / A & GT; & LT; / LI & GT;
       & LT; LI & GT; & LT; A HREF = "" Klasse = "FA FA-DRIBBBLE" & GT; & LT; / A & GT; & LT; / LI & GT;
    & LT; / UL & GT;
 & LT; / DIV & GT;
& lt; / div & gt; 

05. Set SASS-variabelen

Als u volgt bij het gebruik van Codepen, dan hebt u al SASS geïnstalleerd en klaar om te gaan. U hoeft alleen maar op het pictogram / knop van de peninstellingen te klikken en kiest SCSS als uw CSS-preprocessor. Dan kunnen we doorgaan en in sommige variabelen toevoegen die al onze kleuren opslaan. We hebben RGBA gebruikt als de kleurwaarden om ons zinvollere controle te geven over alle dekking van de kleuren.

 $ Bluegradient: RGBA (103, 188, 223, 8);
$ Lightgreen: RGBA (188, 219, 183, .5);
$ groen: RGBA (119, 180, 109, 0,5);
$ Green-Border: RGBA (171, 221, 164, 0.5);
$ blauw: RGBA (80, 205, 227, 1);
$ blue-grens: RGBA (147, 223, 236, 1); 

06. Upload een achtergrondafbeelding

Om dingen aantrekkelijker te maken, zullen we een mooie achtergrondafbeelding op het lichaam plaatsen. Hier kunnen we onze eerste set variabelen gebruiken en de achtergrondafbeelding geven een aangename verloopoverlay die van lichtgroen naar blauw gaat. Vervolgens om onze achtergrondafbeelding volledig responsief te maken, zullen we de hoogste hoogte instellen tot 100VH.

 lichaam {
 Achtergrond: lineair -gradiënt (naar rechts, $ lightgreen, $ bluegradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Center No-Repeat;
 Achtergrondformaat: dekking;
 Positie: familielid;
 Hoogte: 100VH;
 } 

07. Kies een profielachtergrond en afbeelding

Elk teamprofiel krijgt dezelfde stijlen en het klassenteam zal hiervoor worden gebruikt. De achtergrond zal wit zijn, alle inhoud gecentreerd en we moeten ervoor zorgen dat de positie op familielid is ingesteld. Dan kunnen we de CSS opnemen voor het profielbeeld. Zorg voor de beste resultaten voor de originele afbeelding die u gebruikt heeft een dimensies die niet groter is dan 200px-plein. We zullen echter de hoogte en breedte van deze veranderen binnen de fotomegevensregel.

 .team {
 Vulling: 30px 0 40px;
 Margin-top: 60px;
 Achtergrond: #fff;
 Tekst-Uitlijnen: Centrum;
 overloop verborgen;
 Positie: familielid;
 Cursor: wijzer;
 Box-Shadow: 0 0 25px 1px RGBA (0,0,0,0.3);
 .photo {
 Display: Inline-Block;
 Breedte: 130px;
 Hoogte: 130px;
 margin-bodem: 50px;
 Positie: familielid;
 Z-index: 1;
 ​
 } 

08. Voeg de animaties toe

Het eerste stukje animatie dat we zullen toevoegen, staan ​​bovenaan ons profielelement. Het idee is dat wanneer we over het hele element zweven, een blauwe cirkelvormige vorm zal animeren. We kunnen bepalen hoeveel van het blauw we kunnen zien door de positie hiervan op te geven om een ​​onderste percentage te hebben. Dus speel met dit percentage en je krijgt een beter idee van hoe dit werkt. Je weet het nooit: je kunt zelfs een beter effect ontdekken!

 .Blue .photo: vóór {
 inhoud: "";
 Breedte: 100%;
 Hoogte: 0px;
 Border-Radius: 50%;
 Achtergrond: $ blauw;
 Positie: absoluut;
 onderkant: 130%;
 RECHTS: 0;
 Links: 0;
 Transformeren: schaal (3);
 Overgang: alle .3S lineaire 0s;
​
.team: Hover Photo: vóór {
 Hoogte: 100%;
} 

09. Animeer de teamfoto

De teamfoto is ons brandpunt in deze UI en is waarschijnlijk het meest voor de hand liggende element dat je zou verwachten in een vorm of vorm te animeren. De CSS die we in deze stap zullen toevoegen, draaien eerst de foto in een kleinere cirkel, dan zal wanneer opgehoopt daar een lichtblauwe rand is toegevoegd en de foto zal samen met de grens opschalen. Met de toegevoegde overgangen krijgen we een mooie fluïdumanimatie.

 .Blue .pic: na {
 inhoud: "";
 Breedte: 100%;
 Hoogte: 100%;
 Border-Radius: 50%;
 Achtergrond: $ blauw;
 Positie: absoluut;
 Top: 0;
 Links: 0;
 Z-index: 1;
​
.team .photo img {
 Breedte: 100%;
 Hoogte: Auto;
 Border-Radius: 50%;
 transformeren: schaal (1);
 Overgang: alle 0,9s gemak 0s;
​
.Blue: Hover Photo img {
 Box-Shadow: 0 0 0 14PX $ Blue-Border;
 transformeren: schaal (0,6);
 ​

10. Tweak de naam en positie van de profiel

De profielnaam en positie hebben een beetje opruiming nodig. Dit zullen niet geanimeerd zijn, maar dat zou je niet kunnen weerhouden om je eigen animatie toe te voegen als je wilt. Misschien schaal ze enigszins op zweven, zoals je voldoende ruimte hebt vanwege de grootte van de foto.

 .Profile-txt {
 margin-bodem: 30px;
 .title {
 FONT-SIZE: 2REM;
 Font-gewicht: 700;
 Kleur: # 333;
 Letter-spating: 1,5px;
 Tekst-transformatie: kapitaliseren;
 margin-bodem: 6px;
 ​
 .positie{
 Weergave: blok;
 FONT-SIZE: 1REM;
 Kleur: # 555;
 ​
} 

11. Voeg sociale pictogrammen toe

De sociale pictogrammen zullen eerst worden gepositioneerd bij de onderkant van de pagina met -100px. Als we dan eroverheen bewegen, wordt de onderste positie ingesteld op nul en met een overgang toegevoegde, geeft dit ons een mooie soepele animatie omdat het weer in beeld gaat. De pictogrammen krijgen hun eigen hover-staat, die hun achtergrond in het wit en het pictogram voor blauw instellen.

 .Blue .Social-iconen {
 Breedte: 100%;
 lijst-stijl: geen;
 Vulling: 0;
 marge: 0;
 Achtergrond: $ blauw;
 Positie: absoluut;
 onderkant: -100px;
 Links: 0;
 Transitie: alle 0,6S gemak;
 LI {
 Display: Inline-Block;
 
 een {
 Weergave: blok;
 Vulling: 8px;
 FONT-SIZE: 1REM;
 Kleur: #fff;
 tekst-decoratie: geen;
 Overgang: alle 0,5s gemak;
 & Amp;: Hover {
 Kleur: $ blauw;
 Achtergrond: #fff;
 ​
 ​
 ​
​
.team: hover .Sociale pictogrammen {
 bodem: 0px;
} 

12. Maak het Green Team-lid

Om dingen een beetje te mengen, kunnen we beginnen meer leden aan ons team toe te voegen. De kleur die we hierna zullen gebruiken, zijn groen. Maar laat eerst teruggaan naar het HTML-sectie / bestand en alles wat we moeten doen is de Col-MD-3-klasse kopiëren - niet de rij - naar de laatste div-tag onder de sociale pictogrammen en plak het in.

 & lt; div class = "team groen" & GT;
 & lt; div class = "foto" & GT;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & GT;
 & lt; / div & gt; 

Zodra je de blauwe klasse naar Green hebt veranderd, kunnen we eindelijk toevoegen aan alle CSS die ons dezelfde animatie geven.

. Green: Hover Photo img {
 Box-Shadow: 0 0 0 14px $ Green-Border;
 transformeren: schaal (0,6);
 ​
.groen .photo: vóór {
 inhoud: "";
 Breedte: 100%;
 Hoogte: 0px;
 Border-Radius: 50%;
 Achtergrond: $ groen;
 Positie: absoluut;
 onderkant: 135%;
 RECHTS: 0;
 Links: 0;
 Transformeren: schaal (3);
 Overgang: alle .3S lineaire 0s;
​
.Green .Sociale pictogrammen {
 Breedte: 100%;
 lijst-stijl: geen;
 Vulling: 0;
 marge: 0;
 Achtergrond: $ groen;
 Positie: absoluut;
 onderkant: -100px;
 Links: 0;
 Transitie: alle 0,6S gemak;
 LI {
 Display: Inline-Block;
 een {
 Weergave: blok;
 Vulling: 8px;
 FONT-SIZE: 1REM;
 Kleur: #fff;
 tekst-decoratie: geen;
 Overgang: alle 0,5s gemak;
 & Amp;: Hover {
 Kleur: $ groen;
 Achtergrond: #fff;
 ​
 ​
 ​
} 

En de schoonheid van deze aanpak is dat u kunt herhalen zoals vereist voor veel verschillende kleurenklassen, zodat u uw UI-animaties subtiel kunt gebruiken zoals vereist is.

Als u een site met een team bouwt, moet u ervoor zorgen dat u betrouwbaar bent, veilig cloud opslag om dingen samenhangend te houden.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 307 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop uitgave 307 of Abonneer u op NET ​

Wilt u meer weten over de ins en outs van UI-animatie?

Als u meer wilt leren over hoe u uw sites kunt laten knallen en schitteren met behulp van slanke UI-animatie, zorg er dan voor dat u uw ticket hebt opgehaald Genereer Londen ​

Een front-end ontwerper en ontwikkelaar werken momenteel als Creative Developer voor Asemblr.com, Steven Roberts levert zijn gesprek - CSS-animatie: verder dan overgangen - waarin hij je de beste tools voor het werk zal laten zien en een aantal van de beste animaties voor het werk zal laten zien en een aantal van de beste animaties weergeven Het web te bieden heeft, terwijl het ontdekt van de mogelijkheden en beperkingen van animatie met alleen CSS.

Genereer London vindt plaats van 19-21 september 2018. KRIJG NU ​

Gerelateerde artikelen:

• Hoe animatie in mobiele apps te gebruiken
• De PRO's Guide to UI Design
• Een beginnersgids voor het ontwerpen van interface-animaties