Das heutige Projekt ist dumm und macht Spaß, aber es hat einen echten Sinn und einen erzieherischen Zweck. In einem kürzlich erschienenen Artikel habe ich fünf Möglichkeiten zur Verwendung mehrerer CSS-Hintergrundbilder zum Erstellen cooler Hover-Effekte untersucht. Ich hatte eine Idee in diesem Artikel, zu der ich nicht gekommen bin, nur weil seine Komplexität eine eigenständige Erklärung verdient.
Dieser Artikel ist dann eine Erweiterung dieser vorherigen Diskussion. Wir verwenden mehrere Hintergründe, um einen coolen Filmeffekt zu erzeugen, bei dem jemand eine Karte durchquert, während der Aussichtspunkt herausgezoomt wird. Die beste und nerd-tastischste Art, dies zu zeigen, besteht natürlich darin, die bekannte Geschichte von Frodo über Mittelerde zu verwenden, um am Mount Doom in Mordor anzukommen. Lass uns anfangen.
Das Konzept
Die Grundidee für diesen Hover-Effekt ist einfach. Es gibt einen Container mit zwei verschiedenen Hintergründen. Der Behälter am unteren Rand des Stapels füllt den gesamten Behälter, der Behälter oben am Stapel ist viel kleiner. Im Hover-Modus wird das vollständige Anschnittbild (das weit über den Container hinausragt) nach links verschoben, während das kleine Bild nach rechts bewegt wird. Dies ist eine grundlegende Animationstechnik, bei der das Motiv so aussieht, als bewege es sich durch die Szene.
Um die Dinge noch interessanter zu machen, möchte ich, dass die Szene mit einer vergrößerten Ansicht des Motivs beginnt und dann nach außen schwenkt, um die Landschaft als Ganzes zu sehen.
Warum Mittelerde?
Die praktischste Verwendung, die ich mir für diese Idee vorstellen konnte, war, jemanden zu zeigen, der sich auf einer Karte bewegt. Dies ist ein ziemlich typischer Anwendungsfall. Egal, ob Ihr Unternehmen nur den Standort gewechselt hat oder Ihre Familie gerade in den Urlaub gefahren ist, es fällt Ihnen leicht, eine anständige Entschuldigung zu finden, um eine lustige Kartenanimation zu implementieren.
"Fühlen Sie sich frei, mich in den Kommentaren über mich lustig zu machen. Nachdem ich die Demo gesehen habe, versichert mir meine Frau, dass ich es verdient habe."Nun, da ich ein riesiger Nerd bin, der von dem kommenden Film "The Hobbit" völlig begeistert ist. Meine Gedanken sprangen sofort zu einer Szene aus Mittelerde. Das heutige Projekt entwickelte sich somit zu einer Hutspitze der letzten filmischen Hobbit-Reise. Fühlen Sie sich frei, sich in den Kommentaren über mich lustig zu machen. Nachdem ich die Demo gesehen habe, versichert mir meine Frau, dass ich es verdient habe.
Warum mehrere Hintergrundbilder?
Könnten wir dasselbe tun, wenn Bilder in unseren HTML-Code fallen? Ja. Würde es uns noch mehr Freiheit geben, die Bilder zu manipulieren? Sie wetten
Warum benutzen wir dann kein HTML? Da es in der Übung darauf ankommt, mehrere Hintergrundbilder in CSS zu verwenden, ist das der Grund! Eines Tages werden Sie gezwungen sein, etwas mit mehreren Hintergrundbildern zu codieren, und Sie werden zum Glück alles darüber wissen.
Sehen Sie es in Aktion
Bevor wir mit dem Bauen beginnen, schauen wir uns an, was wir zu schaffen versuchen. Klicken Sie unten, um das fertige Produkt auszuchecken.
Demo: Klicken Sie hier, um die Live-Version zu starten.
Erste Schritte: Das HTML
Dieses Experiment verwendet alle CSS mit minimaler Auszeichnung. Alles was Sie wirklich für das gesamte Projekt benötigen, ist ein einzelnes leeres div. Das ist es!
Natürlich können Sie Text und andere Objekte hinzufügen, um das Element komplexer zu machen. Für heutige Zwecke ist dies jedoch alles HTML, das wir benötigen.
Größe der Div
Bevor wir mit etwas anderem fortfahren, müssen wir uns für eine Größe für unser div entscheiden. Dies wird alle übrigen Entscheidungen beeinflussen. Ich habe ein Rechteck mit guter Größe gewählt: 500px breit und 375px groß. Ich habe es dann auf der Seite zentriert und um 20 Pixel vom oberen Rand der Seite nach unten verschoben.
Bereiten Sie Ihre Bilder vor
Um mitzumachen, benötigen Sie zwei Bilder: eine Karte und ein Motiv. Sie können alles verwenden, was Sie möchten, aber aus zwei Gründen habe ich die beiden folgenden Bilder ausgewählt:
Meine Mittelerdekarte ist ziemlich groß: 1000px bei 750px und mein Frodo-Bild ist ziemlich klein: 100px bei 100px.
Planen Sie die Animation
Nun, da wir unsere Bilder haben, müssen wir sorgfältig darüber nachdenken, was wir zu tun versuchen. Offensichtlich beginnt Frodo seine Reise in The Shire, also müssen wir den Nordwest-Quadranten der Karte vergrößern und das kleine Bild irgendwo in diesem Bereich positionieren.
Er macht dann eine Reise nach Mordor, das sich im Südosten des Quadranten befindet. Wir möchten, dass Frodo diagonal nach rechts und rechts bewegt wird. Am Anfang der Animation möchten wir The Shire vergrößern, am Ende der Animation jedoch ganz Mittelerde sehen. Hier sind die zwei Zustände für unsere Kartengröße:
- Beginn der Kartengröße: 1.000 x 750 Pixel (volle Größe)
- Endkartengröße: 500 x 375 Pixel (Div-Größe)
Frodo muss auch die Größe ändern, da wir verkleinern. Da sich die obigen Zahlen dazu bewogen haben, die Bildgröße perfekt zu halbieren, folgen wir hier:
- Beginnende Frodo-Größe: 100 x 100 Pixel (volle Größe)
- End-Frodo-Größe: 50 x 50 Pixel (halbe Größe)
Wir müssen auch die Bilder positionieren, aber das ist im laufenden Betrieb einfacher, wenn wir sie einfügen, also gehen wir zu diesem Schritt über.
Fügen Sie die Bilder ein
Jetzt ist es Zeit, die Bilder in unser Div zu werfen. Das Tolle an der Verwendung mehrerer Hintergründe ist, dass Sie keine verrückten Herstellerpräfixe benötigen, Sie müssen nicht einmal wirklich eine neue Syntax erlernen. Legen Sie einfach ein Bild wie immer ein, fügen Sie ein Komma ein und werfen Sie dann ein anderes Bild.
Hier habe ich zur Klarheit einige Zeilen zurückgeschickt. Sie fügen zusätzlichen Platz hinzu, tragen jedoch dazu bei, den Code lesbar zu halten. Beachten Sie, dass die Stapelreihenfolge im Code die Stapelreihenfolge in der Live-Version darstellt. Hier befindet sich die Karte unten und das Thema oben, was genau das ist, was wir brauchen (dies ist alles im #middleEarth-Selektor).
Folgendes gibt uns das:
Die gute Nachricht ist, dass die Karte standardmäßig mit dem Ursprung oben links positioniert ist, was genau das ist, was wir wollen. Die schlechte Nachricht ist, dass Frodo auf dieselbe Weise positioniert ist, also müssen wir ihn ins Shire bringen, um zu beginnen.
Um das Frodo-Bild zu positionieren, fügen Sie es nach dem No-Repeat-Verfahren einfach horizontal und vertikal ein. bisschen. Der beste Weg, dies zu tun, ist einfach zu experimentieren und zu sehen, was funktioniert. Ich kam mit 150px auf 150px, was ihn direkt neben dem Label für The Shire platziert.
Unser anfängliches Setup ist jetzt genau dort, wo wir es haben wollen.
Anwenden separater Bildgrößen
Um sicherzustellen, dass die Animation poper läuft, müssen wir einige wichtige Dinge richtig machen. Ein wichtiger Schritt ist die Angabe unserer Hintergrundbildgrößen.
Diese sind zunächst nicht erforderlich, da wir lediglich die Standardgröße verwenden. Die Änderung kann jedoch nicht ohne explizite Angabe der Start- und Stopp-Parameter animiert werden. Wir benutzen einfach die Hintergrundgröße property with und füge ein Komma ein, um die Werte zu trennen. Genau wie beim Einfügen der Bilder können wir die entsprechenden Eigenschaften jedes Bildes mit einem Komma eindeutig manipulieren.
Hover-Stile
Beim Schweben muss Frodo nach Mordor aufbrechen, sobald die Karte herauszoomen beginnt. Wir haben bereits das meiste herausgefunden, was wir dazu tun müssen. Diesmal müssen unsere Hintergrundgrößen 50 x 50 x 50 und 500 x 375 Pixel betragen (verkleinert Frodo, verkleinert die Karte, um die vollständige Karte anzuzeigen). Außerdem müssen wir Frodo nach Mittelerde bewegen, um die horizontale und vertikale Verschiebung auf 400px bzw. 240px zu erhöhen.
Damit liegt der gute alte Frodo mitten im Herzen von Mordor.
Letzter Schritt: Die Animation
Jetzt haben wir unseren Startpunkt und unseren Haltepunkt eingerichtet, alles, was übrig bleibt, ist die Animation. Natürlich verwenden wir dazu CSS-Übergänge. CSS-Keyframe-Animationen würden viel mehr Spaß machen und es uns ermöglichen, noch viel mehr zu tun (z. B. geeignete Stopps auf dem Weg zu machen), aber sie werden nicht so umfassend unterstützt, sodass wir uns an Übergänge halten müssen.
Beim Schweben möchte ich, dass die Reise ungefähr fünf Sekunden lang ist. Wenn Sie aufhören zu schweben, sollte die Animation an den Anfang zurückkehren. Ich möchte jedoch, dass es hier viel schneller ist, etwa eine Sekunde.
Um dies zu erreichen, müssen wir zwei separate Übergänge einrichten. Der erste geht in die #Mittelerde Wahlschalter und ist auf eine Sekunde eingestellt. Seltsamerweise steuert dies die Mouse-Out-Animation. Der zweite Übergang geht in die #middleEarth: schweben Mit diesem Selektor wird die Mouse-In-Animation gesteuert.
Hier ist unser fertiges CSS, das Ihnen alles zeigt, was Sie brauchen, um alles zum Laufen zu bringen:
Fazit
Damit sind wir alle fertig! Sie sollten jetzt eine Menge toller Dinge über die Verwendung mehrerer Hintergründe wissen: Wie werden sie in der richtigen Absteckreihenfolge angewendet, positionieren Sie sie unabhängig voneinander und animieren Sie die Größe und Position der einzelnen Bilder.
Werfen Sie einen Blick auf die Demo, um das Projekt in Aktion zu sehen, und lassen Sie uns im Kommentarabschnitt wissen, was Sie denken.