Slick-UI-Animationen erstellen

Immer häufiger erkennen Designer und Entwickler die Wichtigkeit von Bewegungsdesign im Kontext von Benutzererfahrung . Die Animation im Internet ist nicht mehr ein Weg, um den Benutzer zu begeistern und zu wow, aber ein funktionales Werkzeug, das Erfahrungen macht, macht Spaß und denkwürdig. Und es gibt eine Reihe verschiedener Tools und Ansätze, von denen CSS-Animation. Techniken mit Bootstrap oder HTML.

Die Animation im Kontext von Benutzeroberflächen ist immer noch ein sehr neues Feld. Es gibt nicht viele Ressourcen, die die Best-Praxis unterrichten oder gemeinsame Muster der UI-Animation zeigen, die wir folgen können. Meistens geht es um Experimente, Benutzertest und vielleicht ein bisschen Versuch und Irrtum.

• 15 Responsive Webdesign-Tutorials

In diesem Tutorial werden wir also etwas erstellen, das nicht verwirrt, den gängigen Mustern folgt und stilvoll ist. Dies ist der Team-Profilbereich, den Sie oft auf Unternehmens-Websites sehen. Die Idee ist, ein wenig mehr Informationen zum Team / Mitarbeiter anzuzeigen, wenn jeder überschwemmt wird. Im gesamten Tutorial verwenden wir Codepen, aber natürlich können Sie stattdessen Ihren eigenen Lieblings-Editor- und Entwicklungsumfeld verwenden. Denken Sie daran, dass ein komplexeres Site erstellt wird, möglicherweise Ihre Web-Hosting Seien Sie also sicher, dass Sie einen Service haben, der für Sie arbeitet.

Möchten Sie ein unkompliziertes Werkzeug für die Erstellung einer Website? Verwenden Sie einen brillanten Webseitenersteller .

01. Richten Sie ein

Beginnen Sie mit dem Öffnen von Codepen und erstellen Sie einen neuen Stift. Wir werden Bootstrap 4 und SASS (.sSCSS) verwenden. Stellen Sie daher sicher, dass Sie innerhalb der Einstellungen den Bootstrap CSS und JS als Ressourcen-Links enthalten und auch die CSS an SCSS einstellen. Eine weitere Ressourcenverbindung, die Sie hinzugefügt werden müssen, ist font Font Ehreome, die wir für unsere sozialen Symbole verwenden werden.

02. Erstellen Sie Container, Reihen und Spalten

Container sind, welchen Bootstrap als grundlegendes Layoutelement verwendet, und sie sind erforderlich, wenn Sie das Standard-Gittersystem verwenden. Innerhalb von Containern müssen Sie in einer Reihe hinzufügen. Zeilen sind Wrapper für Spalten, und Sie können die Anzahl der Spalten angeben, die Sie aus einem möglichen 12 gewünschten, und was der Haltepunkt ist. In unserem Fall möchten wir ein Element, das einen mittelgroßen Haltepunkt hat und drei Spalten in der Breite füllt.

 & lt; Div Class = "Container" & GT;
 & lt; Div Class = "Reihe" & GT;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Bildlink und Farbe hinzufügen
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Set Profilbild und Farbe

Das erste Profil-UI-Element, mit dem wir beginnen, werden für ein weibliches Teammitglied sein, und sie wird Teil des blauen Teams sein. Die Farbe wird mit einer Klasse namens Blau festgelegt und die tatsächliche Farbe wird schließlich mit SASS-Variablen definiert, die wir in einem späteren Schritt tun werden. Dann müssen wir ein Foto hinzufügen und eine Klasse namens Foto geben.

 & 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. Profilname und Titel hinzufügen

Das letzte Bit von HTML, das hinzugefügt werden soll, ist für den Namen, den Titel- und Social-Icons, der unter dem letzten in den letzten Schritt hinzugefügten DIV-Tag hinzugefügt wird. Für die sozialen Symbole werden wir font fantastisch verwenden, und diese werden in einer ungeordneten Liste platziert.

 & lt; div class = "profil-txt" & gt;
      & lt; H1-Klasse = "Titel" & GT; libby & lt; / h1 & gt;
      & lt; span class = "position" & gt; web designer & lt; / span & gt;
   & lt; / div & gt;
          & lt; UL-Klasse = "Sozialikonen" & GT;
       & lt; li & gt; & lt; ein href = "" class = "fa fa-facebook" & gt; / lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; ein href = "" class = "fa fa-twitter" & lt; / lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; ein href = "" class = "fa fa-linkedin" & lt; / lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; ein href = "class =" fa fa-dribbble "& lt; / lt; / a & gt; & lt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Set Sass-Variablen

Wenn Sie mit CodePen folgen, haben Sie bereits SASS installiert und bereit zu gehen. Sie müssen nur auf das Symbol / Button Stifteinstellungen klicken und SCSS als CSS-Präprozessor auswählen. Dann können wir weitermachen und einige Variablen hinzufügen, die alle unsere Farben speichern werden. Wir haben RGBA als Farbwerte verwendet, um uns eine sinnvollere Kontrolle über die Opazität von Farben zu ermöglichen.

 $ Bluegradient: RGBA (103, 188, 223, .8);
$ lichtgreen: RGBA (188, 219, 183, .5);
$ grün: RGBA (119, 180, 109, 0,5);
$ Green-Border: RGBA (171, 221, 164, 0,5);
$ Blau: RGBA (80, 205, 227, 1);
$ Blue-Border: RGBA (147, 223, 236, 1); 

06. Laden Sie ein Hintergrundbild hoch

Um die Dinge ansprechender zu machen, werden wir ein schönes Hintergrundbild auf den Körper legen. Hier können wir unseren ersten Satz von Variablen nutzen und dem Hintergrundbild eine angenehme Gradientenüberlagerung geben, die von hellgrünem bis blau ausgeht. Um unser Hintergrundbild vollständig ansprechend zu machen, setzen wir die Sichthöhe auf 100VH ein.

 Körper {
 Hintergrund: Lineargradient (nach rechts, $ lichtgreen, $ bluebradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Mitte No-Repeat;
 Hintergrundgröße: Abdeckung;
 Position: relativ;
 Höhe: 100VH;
 } 

07. Wählen Sie einen Profilhintergrund und ein Bild

Jedes Teamprofil wird in den gleichen Stilen gegeben und das Klassenteam wird dafür verwendet. Der Hintergrund wird weiß, alle Inhalte zentriert und wir müssen sicherstellen, dass die Position auf Relativ eingestellt ist. Dann können wir die CSS für das Profilbild einschließen. Stellen Sie für die besten Ergebnisse sicher, dass das Originalbild, das Sie verwenden, Abmessungen nicht größer als 200pX-Square. Wir werden jedoch die Höhe und Breite dieser in der Foto-CSS-Regel ändern.

 .team {
 Polsterung: 30px 0 40px;
 Margin-Top: 60px;
 Hintergrund: #FFF;
 Text-ALIGN: CENTER;
 Überlauf versteckt;
 Position: relativ;
 Cursor: Zeiger;
 Kastenschatten: 0 0 0 25px 1px RGBA (0,0,0,0.3);
 {photo {
 Anzeige: Inline-Block;
 Breite: 130px;
 Höhe: 130px;
 Margin-Bottom: 50px;
 Position: relativ;
 Z-Index: 1;
 }
 } 

08. Fügen Sie die Animationen hinzu

Das erste Animationsstück, das wir hinzufügen, werden sich an der Spitze unseres Profilelements befinden. Die Idee ist, dass, wenn wir über das gesamte Element schweben, eine blaue kreisförmige Form nach unten animieren wird. Wir können kontrollieren, wie viel von Blau wir sehen können, indem wir die Position davon angeben, um einen unteren Prozentsatz zu haben. Spielen Sie also mit diesem Prozentsatz herum und Sie erhalten eine bessere Vorstellung davon, wie dies funktioniert. Sie wissen nie: Sie können sogar einen besseren Effekt entdecken!

 .Blue .photo: Bevor {
 Inhalt: "";
 Breite: 100%;
 Höhe: 0px;
 Grenzradius: 50%;
 Hintergrund: $ blau;
 Position: absolut;
 unten: 130%;
 Rechts: 0;
 links: 0;
 Transformation: Skala (3);
 Übergang: Alle .3s linear 0s;
}
.Team: Hover .photo: Bevor {
 Höhe: 100%;
} 

09. Animieren Sie das Team Foto

Das Teamfoto ist unser Fokuspunkt in dieser UI und ist wahrscheinlich das offensichtlichste Element, das Sie in irgendeiner Form oder Form animieren würden. Die CSS, die wir in diesem Schritt hinzufügen werden Mit den hinzugefügten Übergängen erhalten wir eine schöne fließende Animation.

 .Blue .pic: After {
 Inhalt: "";
 Breite: 100%;
 Höhe: 100%;
 Grenzradius: 50%;
 Hintergrund: $ blau;
 Position: absolut;
 oben: 0;
 links: 0;
 Z-Index: 1;
}
.Team .photo img {
 Breite: 100%;
 Höhe: Auto;
 Grenzradius: 50%;
 Transformation: Skala (1);
 Übergang: Alle 0.9s leichter 0 s;
}
.Blue: Hover .photo img {
 Kastenschatten: 0 0 0 14px $ Blue-Border;
 Transformation: Skala (0,6);
 }

10. Tweak den Profilnamen und die Position

Der Profilname und die Position benötigen ein wenig auf dem Laufenden. Diese werden nicht animiert, aber das sollte Sie nicht aufhören, Ihre eigene Animation zu diesen hinzuzufügen, wenn Sie möchten. Vielleicht skalieren Sie sie leicht auf dem Hover, da Sie aufgrund der Größenbildung des Fotos genug Platz haben.

.profile-txt {
 Margin-Bottom: 30px;
 .Titel {
 Schriftgröße: 2REM;
 Font-Gewicht: 700;
 Farbe: # 333;
 Briefabstand: 1.5px;
 Text-Transformation: Großschreibung;
 Margin-Bottom: 6px;
 }
 .Position{
 Bildschirmsperre;
 Schriftgröße: 1REM;
 Farbe: # 555;
 }
} 

11. Soziale Symbole hinzufügen

Die sozialen Symbole werden zunächst von der Seite der Seite von -100px positioniert. Wenn wir dann schweben, wird die untere Position auf Null eingestellt und mit einem Übergang hinzugefügt, ergibt uns eine schöne reibungslose Animation, da sie sich wieder in Sicht bewegt. Die Symbole erhalten ihren eigenen Hover-Zustand und setzen ihren Hintergrund auf Weiß und das Symbol zu Blau.

 .Blue .Social-Icons {
 Breite: 100%;
 List-Stil: Keine;
 Polsterung: 0;
 Marge: 0;
 Hintergrund: $ blau;
 Position: absolut;
 unten: -100px;
 links: 0;
 Übergang: Alle 0,6s Leichtigkeit;
 li {
 Anzeige: Inline-Block;
 
 ein {
 Bildschirmsperre;
 Polsterung: 8px;
 Schriftgröße: 1REM;
 Farbe: #FFF;
 Textdekoration: Keine;
 Übergang: Alle 0,5s leichter;
 & amp;: Hover {
 Farbe: $ blau;
 Hintergrund: #FFF;
 }
 }
 }
}
.Team: Schwebe .Sozial-Icons {
 unten: 0px;
} 

12. Machen Sie das grüne Teammitglied

Um die Dinge ein wenig zu mischen, können wir anfangen, unserem Team mehr Mitglieder hinzuzufügen. Die Farbe, die wir für diesen nächsten verwenden, wird grün sein. Gehen Sie zunächst wieder in den HTML-Abschnitt / -Datei zurück, und alles, was wir tun müssen, ist, die COL-MD-3-Klasse zu kopieren - nicht die Zeile - nicht in das letzte DIV-Tag unter den sozialen Symbolen und fügen Sie ihn ein.

 & 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; 

Sobald Sie die blaue Klasse in Grün geändert haben, können wir endlich alle CSS hinzufügen, die uns dieselbe Animation geben.

 .green: Hover .photo img {
 Kastenschatten: 0 0 0 14px $ grün-grenze;
 Transformation: Skala (0,6);
 }
.Green .photo: Bevor {
 Inhalt: "";
 Breite: 100%;
 Höhe: 0px;
 Grenzradius: 50%;
 Hintergrund: $ grün;
 Position: absolut;
 Boden: 135%;
 Rechts: 0;
 links: 0;
 Transformation: Skala (3);
 Übergang: Alle .3s linear 0s;
}
.gas .Sozial-Icons {
 Breite: 100%;
 List-Stil: Keine;
 Polsterung: 0;
 Marge: 0;
 Hintergrund: $ grün;
 Position: absolut;
 unten: -100px;
 links: 0;
 Übergang: Alle 0,6s Leichtigkeit;
 li {
 Anzeige: Inline-Block;
 ein {
 Bildschirmsperre;
 Polsterung: 8px;
 Schriftgröße: 1REM;
 Farbe: #FFF;
 Textdekoration: Keine;
 Übergang: Alle 0,5s leichter;
 & amp;: Hover {
 Farbe: $ grün;
 Hintergrund: #FFF;
 }
 }
 }
} 

Und die Schönheit dieses Ansatzes ist, dass Sie nach Bedarf für viele verschiedene Farbklassen wiederholen können, wodurch Sie Ihre UI-Animationen, die Ihre UI-Animationen superieren können, wie dies erforderlich ist.

Wenn Sie einen Standort mit einem Team bauen, stellen Sie sicher, dass Sie zuverlässig, sichern Cloud-Speicherung. Dinge kohärent halten.

Dieser Artikel wurde ursprünglich in Ausgabe 307 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Ausgabe 307 kaufen oder Net abonnieren .

Möchten Sie mehr über das Ins und die Outs of UI-Animation erfahren?

Wenn Sie daran interessiert sind, mehr darüber zu erfahren, wie Sie Ihre Websites mithilfe der schlanken UI-Animation aufnehmen können, stellen Sie sicher, dass Sie Ihr Ticket abgeholt haben London generieren .

Ein Front-End-Designer und Entwickler, der derzeit als kreativer Entwickler für asemblr.com arbeitet, werden Steven Roberts seine Talk-CSS-Animation abgeben: Jenseits von Übergängen - in dem er Ihnen die besten Werkzeuge für den Job zeigen und einige der besten Animationen neu erstellen Das Internet muss anbieten, während Sie die Möglichkeiten und Einschränkungen der Animation mit nur einem CSS entdecken.

Generieren von London findet vom 19. bis 21. September 2018 statt. Holen Sie sich jetzt Ihr Ticket .

Zum Thema passende Artikel:

• So verwenden Sie die Animation in mobilen Apps
• Der PRO-Anleitung zum UI-Design
• Ein Anfängerhandbuch zum Entwerfen von Schnittstellenanimationen