In den letzten Jahren ist jQuery die einfachste und am besten unterstützte Methode, um einfache Animationen online zu implementieren. JavaScript ist außergewöhnlich gut in dem, was es tut, und dieser Artikel ist keineswegs ein Argument dagegen.
CSS3 bietet jedoch einen Einblick in eine mögliche Zukunft, in der grundlegende Animationen mit direktem CSS ausgeführt werden, völlig unabhängig von Skripts. Heute werden wir uns ansehen, wie Sie mit CSS3 ein unterhaltsames und einzigartiges Navigationsmenü erstellen, das @ font-face, Transformationen und Übergänge verwendet.
Einführung
Die Navigation Ihrer Website kann viel über Ihr Unternehmen oder Ihre Dienstleistung vermitteln. Eine saubere, benutzbare Navigation ist eine Grundvoraussetzung für gutes Webdesign und immer Ihre sicherste Wahl.
Wenn Sie jedoch eine Website erstellen, die nicht unbedingt so professionell sein muss, bietet die Navigation einen großartigen Ort, an dem Sie ein wenig Spaß haben und Persönlichkeit einsetzen können.
Um einen Eindruck von dem zu bekommen, was wir bauen, werfen Sie einen Blick auf die Live-Demo. Ich habe ein paar Platzhalterinhalte hinzugefügt, aber die Hauptidee ist hier das Navigationsmenü.
Klicken Sie hier, um die Demo anzuzeigen
Das HTML
Um unser Projekt zu starten, fügen Sie die folgende leere HTML5-Vorlage ein. Beachten Sie, dass ich in HTML5 Shiv geworfen habe, damit IE und HTML5 gut zusammenspielen.
Als nächstes werfen Sie eine einfache ungeordnete Liste in den Hauptteil. Fügen Sie einige Links und den gewünschten Text für die einzelnen Menüelemente hinzu.
Ob Sie es glauben oder nicht, das ist wirklich alles, was wir hier brauchen. Wir werden vielleicht etwas später zurückkommen, aber insgesamt bleibt unser Navigationsmenü in wenigen Minuten einfach und einfach zusammen zu werfen.
Grundlegende Stile
Als Nächstes erstellen Sie eine CSS-Datei, führen Sie einen grundlegenden Reset durch und fügen Sie einige grundlegende Einstellungen für den Körper hinzu. Da dieses Projekt so einfach ist, benötigen wir keinen großen, ausgefallenen CSS-Reset. Oft hilft es jedoch sicherzustellen, dass alle Browser auf derselben Seite mit Rändern und Füllungen stehen.
Als nächstes wollen wir unsere vertikale Liste nehmen, sie horizontal fließen lassen und einen Hover-Effekt hinzufügen. Tun Sie das mit dem folgenden Code.
Hier gibt es nichts, was Sie nicht tausend andere Orte gesehen haben. Durch Verschieben einer ungeordneten Liste nach links setzen wir alle Listenelemente in dieselbe Zeile (vergessen Sie nicht, Ihre Floats zu löschen, wenn Sie mehr Inhalt hinzufügen!). Ansonsten haben wir einfach die Elemente verteilt und eine Schwebefarbe angewendet.
Wir werden später noch mehr Hover-Effekte hinzufügen, aber es ist wichtig, dass wir uns nicht ausschließlich auf sie verlassen. Wenn Sie eine zierliche Verschlechterung der Browser wünschen, sollte das Menü ohne CSS3 voll funktionsfähig sein. Wie Sie in der Abbildung unten sehen können, haben wir dieses Ziel erreicht und sollten jetzt über ein einfaches textbasiertes Menü verfügen, das beim Schweben die Farbe ändert.
Anpassen der Schrift
Da wir einfach nur Spaß haben, möchte ich eine verrückte Schrift verwenden. Meine bevorzugte Option für die Online-Implementierung von benutzerdefinierten Schriftarten ist pure @ font-face mit der Bulletproof @ font-face-Syntax von Paul Irish.
Auf diese Weise müssen wir uns nicht um Systeme von Drittanbietern, Domänen, Registrierung usw. kümmern. Wir können einfach eine Schriftart finden, die uns gefällt, und sie direkt über CSS senden.
Font Eichhörnchen
Das Einrichten von Zeichensätzen mit @ font-face ist für Anfänger nicht die einfachste Aufgabe. Zuerst müssen Sie eine Schriftart finden, die legal verwendet werden kann (was erhebliche Kopfschmerzen verursachen kann). Dann müssen Sie mehrere Versionen der Schriftart aufspüren und diese Versionen in die Bulletproof-Syntax einfügen. Es ist ein echter Schmerz.
Glücklicherweise hat Font Squirrel mit seinen vorgefertigten @ font-face-Kits die Arbeit fast vollständig erledigt.
Ein @ font-face-Kit enthält alles, was Sie benötigen: die Fonts, den Code, ein Beispiel usw. Durchsuchen Sie die Site einfach, bis Sie ein Kit finden, das Ihnen gefällt, und klicken Sie auf die Schaltfläche zum Herunterladen. Ich entschied mich für Kulminoituva unter der? Neuheit? Sektion. Es ist eine verrückte 3D-Blockschrift, die ich normalerweise nie verwenden würde, also perfekt für dieses Projekt.
Nachdem Sie das Kit heruntergeladen haben, kopieren Sie die Schriftarten in das Stammverzeichnis Ihrer Seite und fügen Sie den enthaltenen Text in Ihre CSS-Datei ein.
Wenn Sie dem obigen Bulletproof-Syntax-Link gefolgt sind, sollten Sie wissen, was dieser Code alles macht. Wenn nicht, ist das einzige, was Sie wirklich wissen müssen, dass in der ersten Zeile an anderer Stelle in unserem Code auf die Schriftart Bezug genommen wird: 'KulminoituvaRegular'
Nun wenden wir eine Schriftfamilie auf die Listenelemente an, mit der gleichen Methode, die wir normalerweise verwenden würden, während wir die neue Schriftart als Standard verwenden.
Und jetzt sollte unser Navigationsmenü mehr Spaß machen.
Wir haben jetzt ein recht anständiges kleines Navigationsmenü. Beachten Sie, dass wir auch einige Sicherungszeichensätze angewendet haben, sodass @ font-face nicht funktioniert. Stattdessen wird Helvetica geladen.
Lassen Sie uns zum Abschluss noch einige CSS3-Animationen hinzufügen.
Animieren des Menüs
Derzeit ist der beste Weg für CSS-Animationen ein zweistufiger Prozess, der sowohl Transformationen als auch Übergänge umfasst. Als Erstes möchten wir entscheiden, wie die Objekte in unserem Menü mit einer Transformation bearbeitet werden. Dann setzen wir einen Übergang ein, um die Transformation zu animieren.
Wenn Sie sich die Schriftart ansehen, die wir ausgewählt haben, werden Sie feststellen, dass alle Buchstaben hin und her gedreht werden, um ein schlampiges, von Hand gezeichnetes Gefühl zu erzeugen. Wir werden dies als Inspiration für unsere Transformation verwenden und ein wenig mehr Rotation einführen, wenn der Benutzer über einen Link fährt. Um noch mehr Akzente zu setzen, führen wir auch einen Skalierungseffekt ein.
Text im Hover umwandeln
Bei CSS-Transformationen gibt es vier grundlegende Optionen: Drehen, Skalieren, Neigen und Übersetzen (nach links und rechts bewegen). Da wir nicht möchten, dass sich unser Text verzerrt oder zu viel bewegt, bleiben wir beim Drehen und Skalieren.
Die Syntax für die Implementierung ist sehr einfach und praktisch für alle Versionen von Mozilla, Webkit und Opera.
Wie Sie sehen, haben wir einfach eine Drehung von -10 Grad und eine leichte Skalierung von 1,2 angewendet. Wenn Sie nun über einen Link in der Navigation fahren, sollte er gedreht und größer erscheinen.
Nachdem ich damit ein bisschen gespielt hatte, entschied ich, dass mir die Tatsache, dass alle Links gleich rotierten, nicht gefallen hat. Der Text fühlt sich etwas zufällig an, deshalb wollte ich hier einige Variationen einführen.
Die Lösung besteht darin, Klassen auf die Listenelemente in unserem HTML-Code anzuwenden, damit wir einige unabhängig von anderen gestalten können.
Da wir nun zwei verschiedene Klassen haben, können wir für jede andere Verbindung eine separate Drehung anwenden, sodass sich die ersten und dritten Verbindungen entgegen dem Uhrzeigersinn und die zweiten und vierten Verbindungen im Uhrzeigersinn drehen.
Voila! Jetzt haben wir einen fantastischen Schwebeflug-Effekt. Das letzte, was wir beheben wollen, ist der Übergang. Wenn Sie den Mauszeiger über den Text bewegen, wird sofort eine Rotation ausgeführt. Wir möchten, dass dies schrittweise erfolgt, wie Sie es von einem coolen jQuery-Effekt erwarten würden.
Die Rotation animieren
Der letzte Schritt besteht darin, einen CSS3-Übergang hinzuzufügen, um den Hover-Effekt zu animieren. Wie bei Transformationen sind Übergänge sehr einfach zu implementieren und enthalten dieselbe Basissyntax für Webkit, Mozilla und Opera.
Sie müssen lediglich die Eigenschaft festlegen, die Sie animieren möchten (in diesem Fall? Alle?), Die Dauer und die Beschleunigung. Sie können zwischen Leichtigkeit, Linear, Einstieg, Ausstieg und Ausstieg wählen. Diese Effekte wirken sich auf die Art und Weise aus, in der die Animation ansteigt und verlangsamt.
Wie Sie sehen, haben wir den gleichen Übergang auf beide Klassen angewendet. Fühlen Sie sich frei, dies zu ändern und den Übergang der ersten oder zweiten Klasse zu ändern.
Alles beendet!
Damit ist unser Navigationsmenü abgeschlossen. Klicken Sie hier, um die Live-Demo zu sehen. Denken Sie daran, dass Sie diese Animationstechniken für alles verwenden können, nicht nur für Text. Erstellen Sie eine Miniaturansicht oder eine andere bildgesteuerte Galerie, die denselben Effekt verwendet.
Schlussgedanken
Offensichtlich wird für IE-Benutzer nur ein einfaches Menü angezeigt (obwohl es voll funktionsfähig ist). Mit JavaScript sind Sie definitiv besser dran, wenn Sie möchten, dass solche Animationen in allen Browsern funktionieren. Außerdem wird der Text während des Übergangs in Webkit etwas abgehackt. Ich fand das ziemlich nervig, konnte aber keine Lösung finden (lass es mich wissen, wenn du es tust!).
Trotz aller Argumente macht das Spielen mit CSS-Animationen definitiv Spaß und ist extrem einfach zu implementieren. Hinterlassen Sie einen Kommentar mit einem Link zu allen von Ihnen erstellten coolen CSS3-Animationen und einer kurzen Beschreibung der verwendeten Eigenschaften.