Erstellen Sie fünf fantastische Hover-Effekte mit mehreren CSS-Hintergründen

Heute werden wir mit der CSS-Funktion für mehrere Hintergründe jede Menge Spaß haben. Sie lernen, wie Sie auf einfache Weise mehrere Hintergründe verwenden und wie Sie die Technik mit Hover-Aktionen und CSS-Übergängen kombinieren, um wirklich coole Effekte zu erzeugen.

Folgen Sie uns, während wir fünf verschiedene Anwendungen dieser Idee programmieren, die Sie kopieren und einfügen können, um Ihre eigenen fantastischen Hover zu erstellen.

Was wir bauen

Hier ist ein kleiner Einblick in das, was wir heute schaffen werden. Bewegen Sie den Mauszeiger über die Kreise und überlegen Sie, wie Sie diese Effekte mit reinem CSS erreichen könnten.

Demo: Klicken Sie hier, um die Demo zu starten.

Mehrere Hintergründe

Bis vor kurzem hatte ich nie wirklich mit mehreren Hintergrundbildern in meinem CSS gespielt. Ich wusste, dass das Feature existierte, aber ich hatte nicht wirklich eine einzigartige Art und Weise gefunden, es zu benutzen. Der bewölkte Himmel von Parallax ist fantastisch, aber jeder macht das und ich wollte nicht einfach der Menge folgen.

Die Lösung, die ich fand, bestand darin, einige großartige Hover-Effekte herauszufinden, bei denen mehrere Hintergründe verwendet wurden, um eine Art Eröffnungsanimation zu erstellen. Es ist ein super einfacher Trick, aber ich habe es noch nicht gesehen, also dachte ich, ich zeige Ihnen, wie es funktioniert.

Es gibt eine Million verschiedene Möglichkeiten, um damit zu laufen. Heute bauen wir fünf verschiedene Versionen, damit Sie wirklich ein Gefühl dafür bekommen, was möglich ist.

Das Konzept

Ihre typische CSS-Hover-Animation ist ziemlich einfach: Ein Bild wird weggeschoben, um ein anderes zu zeigen, etwas dreht oder springt, Farben verblassen und plus; Du hast die Idee.

Wenn wir mehrere Hintergründe in das Szenario werfen, haben wir plötzlich einige Variablen, mit denen man arbeiten kann. Mit sehr wenigen Einstellungen können wir einige scheinbar komplexe Animationen erstellen, die nur CSS-Übergänge verwenden, die vorerst noch eine bessere Browserunterstützung bieten als Keyframe-Animationen.

Nehmen wir zum Beispiel an, wir wollen einen Türöffnungseffekt haben. Wir können zwei Hintergrundbilder in verschiedene Richtungen animieren und diese Illusion mit Leichtigkeit erreichen:

Nun haben wir die Erklärung aus dem Weg. Kommen wir zum lustigen Teil und beginnen Sie mit dem Aufbau unserer Hover-Effekte.

Schiebetüren: Horizontal

Nehmen wir das hypothetische Beispiel von oben und sehen wir, ob wir etwas bauen können, das diesen Effekt nutzt. Um zu beginnen, benötigen wir zwei Hintergrundbilder.

Da wir nur eine Idee vorführen, ist es egal, welche Bilder Sie verwenden. Stellen Sie nur sicher, dass eines von ihnen eine Textur ist, die fliesen wird. Ich verwende die dunkle Holzstruktur von Subtle Patterns und ein Piktogramm vom freien WC Sold Out A Bta.

Basis-CSS

Erstellen Sie ein leeres div in HTML und wenden Sie eine Klasse an, die ein einfaches Styling verwendet. Wir werden diese Klasse auf jedes der Beispiele anwenden, die wir heute erstellen.

Ich werde ein paar davon in ein Dokument werfen, also habe ich ein paar Layoutstile, aber am wichtigsten ist hier der Grenzradius, der auf die halbe Höhe / Breite eingestellt ist, was einen schönen Kreis ergibt.

Unsere Hintergrundbilder werden gestapelt, aber hier werden sie mit dem angewendeten Randradius verteilt.

Anwenden mehrerer Hintergrundbilder

Das erste, was wir tun werden, ist, beide Hintergrundbilder anzuwenden, aber als Kurvenball werden wir die Holzstruktur zweimal verwenden, um insgesamt drei Hintergrundbildanwendungen zu erhalten.

Das Anwenden mehrerer Hintergrundbilder in CSS ist so einfach, wie es nur geht: Wenden Sie einfach eines wie normal an, geben Sie dann ein Komma ein und wenden Sie ein anderes an.

Diese Bilder haben eine natürliche Stapelreihenfolge, die der Reihenfolge entspricht, in der Sie sie auflisten: Das erste Bild ist das oberste Bild und das letzte ist das unterste Bild.

Sie können die Hintergründe mit einer Abkürzung positionieren, aber für dieses Beispiel halte ich es für am besten, die Dinge getrennt zu halten, um den Lesern die Arbeit zu erleichtern. In diesem Sinne werfen wir in die Hintergrundposition Eigentum, damit wir unsere Bilder in Position bringen können.

Offensichtlich korreliert jeder Satz von Positionswerten mit einem der Bilder, die wir angewendet haben. Der erste Wert in jedem Satz bewegt das Bild nach rechts (positiver Wert) und links (negativer Wert) und der zweite Wert nach oben (positiver Wert) und nach unten (negativer Wert).

Wie Sie sehen, habe ich den Kreis in der Mitte geteilt, so dass eine Version des Holzbildes links und eine rechts mit dem Fahrzeugbild in der Mitte liegt.

Es scheint verrückt zu sein, die Holzbilder so zu positionieren, weil Sie einfach eins verwenden könnten, aber dies ermöglicht uns eine schöne Animation.

Animieren der Bilder

Da wir nun jedes dieser Hintergrundbilder unabhängig voneinander verschieben können, können wir ziemlich coole Ergebnisse erzielen, wenn wir Übergänge anwenden.

Um dies einzurichten, geben wir alle verschiedenen Browser-Präfixe ein und erstellen einen einfachen Übergang, der eine Sekunde oder weniger dauert. Dann richten wir einen Hover-Wähler ein, der den linken Holzhintergrund weiter nach links und den rechten Holzhintergrund weiter nach rechts bewegt.

Damit sind wir mit dem ersten Beispiel fertig. Wenn Sie nun über dem Holzkreis schweben, werden die Türen geöffnet, um das darunter liegende Bild anzuzeigen.

Schiebetüren: vertikal

Nun, da wir durch ein Beispiel gekommen sind, ist das Ändern dieses Effekts ein Kinderspiel. Hier verwenden wir dieselben CSS-Übergänge und Hintergrundbilder, das einzige, was sich ändert, ist die Positionierung der beiden Holztexturbilder. Diesmal stapeln wir sie übereinander und bewegen sie auf und ab, während der Benutzer schwebt.

Auseinanderbrechen: Quadrat

Lassen Sie uns ein wenig aufpeppen und insgesamt fünf Bilder für den Übergang verwenden. Wenn Sie den Mauszeiger über den Kreis bewegen, wird das Bild in vier Teile zerlegt und fliegt aus dem Blickfeld.

Wir richten die oberen vier Bilder so aus, dass sie sich vertikal und horizontal in der Mitte des Kreises treffen. Dann bewegen wir uns im Schwebeflug auf und ab.

Auseinanderbrechen: Abgerundet

Das Wiederholen dieser Effekte mit einem abgerundeten Bild ist etwas komplizierter, da Sie zum einen transparente PNG-Bilder verwenden müssen, da Sie die Bilder im Standardzustand überlappen müssen. Letzteres verursacht komplizierte Probleme beim Erstellen von Texturen, aber wenn Sie so etwas wie eine einfache Rauschtextur verwenden, ist das ziemlich einfach.

Twist und Shout

Dieses Bild ist aus dem obigen Bild schwer zu verstehen. Im Grunde ist es dasselbe wie der Überbrückungsübergang oben, nur habe ich das zusätzliche Element einer Rotation hinzugefügt, die auftritt, bevor die Bilder auseinander brechen und das darunter liegende erkennen.

Dies beinhaltet einige Macken. Das Problem bei der Drehung ist, dass alle Hintergrundbilder einschließlich des darunter befindlichen Autos gedreht werden. Um dies zu berücksichtigen, habe ich das Auto vorher gedreht, so dass die Übergangsrotation es tatsächlich richtig platziert. Sie können einen Blick auf das Auto während der Rotation werfen, aber es trägt nur zum Effekt bei.

Eine andere interessante Sache ist das Timing der Übergänge. Beachten Sie, dass ich für die Übergänge "Rotieren" und "Bewegen" unterschiedliche Zeitdauern einstelle. Das zeigt, wie unglaublich komplex Sie mit dieser Idee bekommen können.

Einen anderen Blick werfen

Nun, da Sie den Code gesehen haben, werfen Sie einen Blick auf die Demo, um diese Techniken in Aktion zu sehen.

Demo: Klicken Sie hier, um die Demo zu starten.

Fazit

In diesem Artikel sollten Sie über Parallaxeffekte nachdenken, wie Sie mehrere Hintergründe auf interessante Weise anwenden können.

Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie von den obigen Beispielen halten. Haben Sie etwas mit mehreren Hintergrundbildern gemacht? Wir wollen es sehen!