Diese Designtechnik findet sich häufig in persönlichen Portfolios oder auf Designstudio-Websites. Fertigkeitsleisten stehen für ein Wissen, das mit bestimmten Aufgaben in Zusammenhang steht - Webdesign, Illustration, Branding, Charakterdesign - Sie nennen es! Wenn Sie diesen Skill-Leisten einige ausgefallene Animationen hinzufügen, erhalten Sie eine schnellere Verbindung zum Betrachter.
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie CSS3-Skill-Bars mithilfe von Keyframe-Animationen erstellen können. Dies kann auch vollständig mit JavaScript ausgeführt werden, das in älteren Webbrowsern stärker ist. CSS3-Keyframes werden jedoch mit zunehmender Unterstützung heutzutage immer beliebter. Werfen Sie einen Blick auf meine Live-Demo, um das Endprodukt zu sehen.
Live Demo - Quellcode herunterladen
Fertig machen
Beim Durchsuchen von Google bin ich auf diesen Beitrag gestoßen und habe den CSS3-Animationsstil skizziert. Es ist eigentlich ziemlich einfach, wenn Sie die Eigenschaften und die Zusammenhänge zwischen Animation und Keyframes verstehen. Meine Seite verwendet einen einfachen HTML5-Doctype mit einem einzigen externen CSS-Stylesheet.
Zuerst sollten wir uns das HTML-Markup ansehen und wie dieses eine aktive dynamische Leiste erstellt. Die Seite enthält zwei verschiedene Abschnitte - einen mit inneren und einen ohne Etiketten. Da alle Fertigkeitsleisten fast identischen Code verwenden, habe ich nur die erste Leiste auf der Seite kopiert.
Die div #Fähigkeiten wird verwendet, um die gesamte Sammlung von Fähigkeiten zu kapseln. Dies verhält sich wie ein Wrapper, sodass wir alles zentrieren, die Breite vergrößern oder verringern oder andere Einstellungen in CSS anpassen können. Das innere Div mit einer Klasse .Fertigkeit umwickelt jede einzelne zu messende Fertigkeit. In diesem Fall betrachten wir die HTML5 / CSS3-Codierung, die mit 100% Wissen bewertet wird.
Der innere H3-Header ist vorhanden, so dass der Zuschauer erkennen kann, was der Skill misst. Dies könnte stattdessen in der Skill-Bar platziert werden, aber ich entschied mich für die jahrelange Erfahrung in der Bar. Sie werden feststellen, dass die animierte Leiste selbst in einer äußeren Hülle enthalten ist.
Das Spannelement .Bar verwendet einen statischen grauen Hintergrund mit einigen Schatteneffekten, um auf der Seite hervorzuheben. Es wurde auf ähnliche Weise wie das CSS-Deck-Beispiel entworfen, aber ich habe versucht, den HTML-Code ein wenig zu vereinfachen. Die innere Spanne .skillbar Hier findet die Animation statt.
Animieren Sie individuelle Fähigkeiten
Sie werden jedes bemerken .skillbar hat auch eine sekundäre Klasse, die sich auf die zu messende Fähigkeit bezieht. Diese sind an CSS3-Animationen angehängt, die über Keyframes laufen. Jede Fertigkeit wird separat gemessen und sie stoppen an einem anderen Punkt (HTML / CSS erreicht gerade 100%).
Da ich Klassen für diese Fertigkeitsbalken verwende, können wir sie oft auf der Seite duplizieren. So erstellte ich auf derselben Seite eine weitere Gruppe von Beispielen - durch die Wiederverwendung derselben animierten Klassen. Da diese Balken auch kleine Textstücke enthalten, können sie nicht bei 0px Breite beginnen. Normalerweise ist dies in Ordnung, aber in diesem Fall würde der Text in die nächste Zeile übergehen. Erst wenn der Balken animiert wird, wird der Text selbst neu positioniert.
Durch die Verwendung einzelner Klassen kann ich die ursprüngliche Breite an die interne Textlänge anpassen. Auf diese Weise wird der Text nie unterbrochen oder erscheint fehlerhaft, und der Text bleibt immer in der Skill-Leiste zentriert, egal wie breit er animiert ist.
Elemente positionieren
Meine grundlegenden CSS-Eigenschaften sind nicht zu kompliziert, aber es gibt einige Ideen, die es wert sind, diskutiert zu werden. Ich beginne mit der Gesamtstruktur des Skill-Bars-Containers.
Der äußere .Bar Der Container verwendet einen festen Wert für Breite / Höhe, um sicherzustellen, dass in allen Browsern alles gleich aussieht. Das Innere .skillbar behält zwar einen Höhenwert mit Text, aber im zweiten Beispiel werden diese Spannelemente nicht angezeigt, da sie leer sind. Wir müssen für alle internen Fertigkeitsleisten eine Höhe von 100% verwenden, um sicherzustellen, dass sie auch ohne Inhalt angezeigt werden.
Der zentrierte Texteffekt ist auch ziemlich cool, da der interne Inhalt zusammen mit der Leiste animiert wird. Sie mögen diesen Effekt vielleicht nicht und es ist ziemlich einfach, die Ausrichtung zu ändern. Aber wenn Sie bedenken, wie einfach das alles ist, können Sie neue Konzepte ausprobieren, um es auszuprobieren.
Animationsfüllmodi
Wenn ich mit dem Animieren der Elemente anfing, beendet jeder Balken die Animation und greift dann automatisch wieder auf 100% Breite zurück. Dies war offensichtlich nicht meine Absicht, also suchte ich nach einer Lösung.
Ich habe gelesen, dass wir eine Standardbreite für die ursprüngliche Klasse festlegen können .htmlcss so endet es bei 100% Breite, sobald die Animation fertig ist? oder im Fall von jQuery würde die Klasse eine Breite von 55% benötigen. Ich denke, dass dies fast den Zweck verfehlt, den Breitenwert zweimal zu kopieren. Dann erfuhr ich von Füllmodi, von denen ich noch nie zuvor gehört hatte.
Füllmodi teilen der Animation mit, wie Stile vor und nach der Fertigstellung verwendet werden sollen. Verwenden Sie das Schlüsselwort vorwärts zwingt jedes Element dazu, die CSS-Stile des letzten Keyframes beizubehalten. In diesem Fall führen wir für jede Klasse eine andere Animation aus, und jede Animation hat eine Startposition von 0%, gefolgt von einer zu 100% abgeschlossenen Position. Ich wusste nie, dass nach der Animation die ursprünglichen Stile wiederhergestellt werden würden.
Wenn Sie mehr über Füllmodi erfahren möchten, lesen Sie diesen Artikel von Mozilla, der sich eingehender mit dem Detail befasst. Das Konzept ist sehr einfach, aber ich kann verstehen, dass ein neuer Entwickler, der CSS3-Keyframe-Animationen ausprobiert, nichts davon wissen würde.
Keyframes abschließen
Der letzte Codeblock, den ich freigeben möchte, sind die Keyframes selbst. Wir geben jedem Keyframe-Setup einen eindeutigen Namen, der durch den vorherigen repräsentiert wird Animation Eigenschaften. Ich benutze CSS3-Präfixe für -moz und -webkit um die Einhaltung möglichst vieler Browserversionen zu gewährleisten. Sie werden feststellen, dass die Animationen in Blöcke unterteilt sind, die nach dem Animationsnamen gruppiert sind:
Sie werden auch bemerken, dass jede Animation nur eine Startposition und eine abgeschlossene Position verwendet, die sich alle innerhalb von 1,5 Sekunden animieren sollten. Einige der Startpositionen verwenden 35px oder 45px, um den Etikettentext vollständig einzukapseln. Sie können diesen Wert in 0px ändern, wenn in der Skill-Leiste selbst kein Text gefunden werden soll.
Abgesehen von diesen Stilen sollte alles andere ziemlich bekannt sein. Der letzte große Abschnitt in meinem Stylesheet definiert die inneren Farbverläufe für jede Skill-Leiste neu. Ohne Beschriftungen können Sie Farben verwenden, um zwischen den Skill-Sets zu unterscheiden. Aus diesem Grund enthalten meine sekundären Set-Fertigkeitsleisten auch eine .alt Klasse.
Live Demo - Quellcode herunterladen
Schließen
Es gibt viele andere fantastische Tutorials, die sich mit diesem Thema und anderen Keyframe-Animationen befassen. Viele tolle Codebeispiele finden Sie auf Websites wie CodePen und JSFiddle, wenn Sie Zeit zum Suchen haben.Sowohl meine Beispiele mit inneren Beschriftungen als auch nur die Standardprozentsätze können in jedem ähnlichen Website-Design funktionieren.
Seien Sie kreativ mit diesen Animationen, um zu sehen, wie sie in andere zukünftige Webprojekte passen könnten. Sie können auch meinen Tutorial-Quellcode herunterladen und versuchen, komplexere Animationen zu erstellen.