CSS-Animationen mit mehreren Schritten sind mit Keyframes einfach. Was aber, wenn wir einfache Übergänge verwenden möchten, um einen ähnlichen Effekt zu erzielen? Wie nehmen wir ein einzelnes Schwebeflug-Ereignis in mehrere Animationen auf verschiedenen Elementen auf?
Die Antwort liegt in der Verwendung von vergrabenen Schwebeflügen, einem einfachen und effektiven Trick, den Sie unbedingt ausprobieren sollten.
Inspiriert durch aktuelle Ereignisse
Chris Coyier von CSS-Tricks dient häufiger als Inspiration für meine Artikel als vielleicht jeder andere Autor. Der Mann weiß eine Menge über CSS und ich lerne immer viel aus seinen Artikeln.
Vor kurzem veröffentlichte er einen Artikel über CSS, der Anfänger normalerweise verwirrt. Darin erklärte er sehr kurz, was er als "begrabene Schwebeflugzeuge" bezeichnete. Ich hatte ehrlich gesagt noch nie wirklich darüber nachgedacht, einen Schwebeflug-Effekt zu verwenden, und wollte unbedingt die Auswirkungen untersuchen. Das Folgende ist das Ergebnis dieser Erkundung.
Was ist ein begrabener Schwebeflug?
Das Konzept hinter einem vergrabenen Schwebeflug ist ziemlich einfach. Die generelle Idee ist, dass wir normalerweise das überbewegte Objekt ändern. Hier ist ein Beispiel:
Hier haben wir einen einfachen Link, der beim Schweben die Farbe ändert. Es stellt sich jedoch heraus, dass wir nicht unbedingt den Gegenstand, über den wir uns bewegen, ändern müssen, sondern tatsächlich einen seiner Nachkommen ändern können. Mal sehen, wie das aussieht:
Hier sieht die Deklaration fast gleich aus, wirkt sich jedoch dramatisch anders aus. Wenn die Maus des Benutzers an einer beliebigen Stelle in den übergeordneten Container eintritt, ändern alle Links in diesem Container sofort die Farbe.
Es ist wichtig zu beachten, dass der IE6 keine Nicht-Link-Hover unterstützt. Es ist auch wichtig anzumerken, dass IE6 heutzutage eine schmutzige, nicht gute Entschuldigung für einen Browser ist und mich nicht wirklich sehr interessiert, was den Unterricht angeht.
Simulieren einer Keyframe-Animation
Als mir klar wurde, dass dies möglich war, begann mein Gehirn sofort mit der kompliziertesten Umsetzung dieses Szenarios, das ich mir vorstellen konnte.
Einfache Anwendungsfälle für diese Methode sind praktisch, aber Sie können sich wahrscheinlich selbst ein Bild davon machen. Stattdessen wollte ich etwas Spaß machen. Das Ergebnis ist ziemlich unpraktisch und verfügt nicht über die beste Browserunterstützung, es erfüllt jedoch das Ziel, dass Sie wirklich darüber nachdenken müssen, ob Sie begrabene Hover kreativ einsetzen.
Die Grundidee, die ich mir ausgedacht habe, ist die Simulation einer Webkit-Keyframe-Animation mit einfachen übergangsbasierten CSS3, die eine viel bessere Unterstützung bieten. Das Ergebnis ist eine komplexe, mehrstufige Animation, die durch ein Hover-Ereignis ausgelöst wird. Warum? Weil wir alle Nerds hier sind und es macht Spaß zu bauen, deshalb.
Erste Schritte: Das HTML
Wir benötigen für dieses Projekt kaum HTML. Ich habe nur einen Container mit einem Header und ein paar Absätzen erstellt. Unser Ziel ist es, mehrere Animationen auszulösen, wenn der Benutzer über dem Div schwebt.
Basic CSS
Diese Stile sind meist beliebig und können nach Belieben geändert werden. Ich habe eine schöne dunkle Hintergrundgrafik erstellt, eine sichtbare Box erstellt und den Stil des Textes definiert.
Zu diesem Zeitpunkt sieht die Live-Vorschau wie im Bild unten aus. Wie Sie sehen, überflutet unser Text die Box, aber das ist völlig in Ordnung, da wir dies in einer Minute ändern werden.
Gestaltung der Kopfzeile und der Absätze
Hier ist die grundlegende Gliederung unserer Animation: Die Kopfzeile befindet sich alleine vertikal im Container. Im Hover-Modus verschwindet der Header und die Absätze werden jeweils einzeln eingeblendet.
Um dies zu erreichen, müssen wir zuerst den Header absolut positionieren. Dies ermöglicht es uns, die Kopfzeile dort zu platzieren, wo wir sie haben möchten, ohne die drei Absätze darunter zu beeinflussen.
Wenn Sie die Zeilenhöhe gleich der Höhe des Containers setzen, wird der Header vertikal innerhalb des div zentriert.
Als nächstes wollen wir unsere Absätze aus der Sicht verbergen. Wir werden sie von unsichtbar zu sichtbar verbergen, also habe ich die Opazitätseigenschaft dazu benutzt.
Das Ergebnis sollte ungefähr so aussehen, wie unten gezeigt, wobei an dieser Stelle nur der Header im Container sichtbar ist.
Definieren der Animationen
Nun, da wir nicht nur unsere Sichtbarkeitsstufen festgelegt haben, sondern auch alles in einer Reihe hat, ist es an der Zeit, die Animationen fertigzustellen.
Zunächst definieren wir unseren Header-Übergang mit den verschiedenen Browser-Präfixen. Als nächstes benutzen wir unseren ersten begrabenen Schwebeflug! Wieder ist die Idee, dass die Animationen gestartet werden, wenn der Container darüber bewegt wird. In diesem Sinne verwenden wir container: schweben h2 um ein Ereignis zu erstellen, das nur für unsere Kopfzeile gilt.
Sobald wir unseren Kopf anvisiert haben, schießen wir ihn nach oben und reduzieren seine Deckkraft auf null.
Animieren der Absätze
Hier kommt der knifflige Teil.Wir haben drei verschiedene Absätze und möchten sie jeweils einzeln ausblenden. Wir müssen dann jedes einzeln anvisieren und mit unterschiedlichen Geschwindigkeiten einblenden.
Da wir keinen der Absätze mit einer speziellen ID oder Klasse versehen haben, verwenden wir sie n-te Kind um sie einzeln zu packen. Da die Animationen sowieso nicht von IE unterstützt werden, ist dies kein Problem.
Die spezifische Länge der Animationen ist ein bisschen seltsam. Ich musste mich ziemlich mit der Art und Weise beschäftigen, wie der Header ausgeblendet wurde, und diese wurden eingeblendet, bis ich etwas fand, das mir gefiel. Diese Zahlen scheinen gut zu funktionieren:
Wenn sich der Benutzer über dem Container befindet, möchten wir, dass die Absätze angezeigt werden. Der letzte Schritt besteht darin, einen anderen verdeckten Hover zu verwenden, um die Absatz-Tags als Ziel festzulegen. Wir gebrauchen .container: hover p um die Absätze auf Schwebeflug anzuvisieren und ihre Deckkraft zu erhöhen. Die Animationen, die wir im vorherigen Schritt erstellt haben, bewirken, dass der Übergang schön und allmählich verläuft.
Das Schöne an all diesen Animationen ist, dass sie umgekehrt genauso gut aussehen, wenn Sie die Maus aus dem div nehmen. Die Absätze werden ausgeblendet und der Header wird wieder eingefügt. Ziemlich ordentlich!
Schau mal
Die Live-Demo ist etwas komplizierter, verwendet jedoch dieselbe Technik wie im obigen Beispiel. Tut mir leid, Internet Explorer-Benutzer machen wie immer keinen Spaß für Sie.
Live Demo: Klicken Sie hier, um zu starten.
Fazit
Mit Hilfe von vergrabenen Schwebeflügen können wir viele wirklich interessante und einzigartige CSS-Techniken erreichen, mit denen Sie zuvor möglicherweise Probleme hatten. In diesem Artikel wurde ein verdeckter Hover verwendet, um mehrere CSS-Animationen für verschiedene Elemente auszulösen, um die Komplexität der Effekte zu veranschaulichen, die Sie implementieren können.
Hinterlassen Sie einen Kommentar und teilen Sie uns mit, wie und ob Sie verschüttete Schwebeflügel verwenden.