Das heutige Projekt ist eine weitere Erkundung der Arten von praktischen Anwendungen, die Sie mit ein wenig Einfallsreichtum und etwas einfacher CSS erreichen können. Sie werden begeistert sein, wie viel Sie mit nur wenigen Codezeilen erreichen können.
Das Endergebnis ist eine großartige Möglichkeit, einen Streifen mit kleinen Miniaturbildern anzuzeigen, die der Benutzer schweben kann, um größere Bilder zu sehen. Lass uns eintauchen und sehen, wie es funktioniert.
Das Konzept
Das grundlegende Layout hier ist ziemlich einfach. Wir möchten einen Streifen mit Miniaturbildern und ein großes gekennzeichnetes Bild. Der knifflige Teil besteht darin, das vorgestellte Bild zu ändern, wenn der Benutzer über einem der Thumbnails steht.
Vorgeschmack: Klicken Sie hier, um das fertige Produkt zu starten.
Mit CSS können Sie nicht zwei verschiedene Divs erstellen und dann den Inhalt des einen als Aktionspunkt für den anderen dienen. Es ist in JavaScript einfach genug, aber CSS gibt Ihnen weniger Freiheit beim Stapeln Ihrer Selektoren.
Wenn wir jedoch klug sind, wie wir unseren HTML-Code strukturieren, ist dieses Projekt ziemlich einfach zu erstellen. Mal sehen, wie das aussieht.
Das HTML
Um dies zu erreichen, benötigen wir vier Miniaturbilder und vier Bilder in voller Größe. Der Schlüssel, um die erstere auf die letztere wirken zu lassen, besteht darin, sie wie folgt zusammenzufassen:
Der Grund, warum wir eine bestimmte Höhe und Breite festlegen, besteht darin, dass wir ein Bild aus den Grenzen des Containers herausschieben und es ausblenden lassen können. Zu diesem Zweck wenden wir auch einen Überlaufwert für ausgeblendet an und beenden ihn, indem wir ihn mit automatischen Rändern zentrieren.
Fortschrittskontrolle
Wir sehen an diesem Punkt ziemlich grob aus, aber machen Sie sich keine Sorgen, alles ist auf dem richtigen Weg!
Alles positionieren
Wie Sie gerade auf dem Screenshot gesehen haben, werden sich Ihre Bilder zu diesem Zeitpunkt überall befinden. Jetzt ist es an der Zeit, alles in die richtige Position zu bringen.
Dies erfordert wiederum ein hartes Nachdenken. Wir möchten, dass alle Thumbnails zusammen gruppiert werden und alle großen Bilder zusammen gruppiert werden, aber HTML ist nicht so aufgebaut.
Da jeder Bildtyp (klein und groß) seine eigene Klasse hat, können wir alle unsere Anker nach links verschieben und dann die großen Bilder durch die absolute Positionierung trennen.
Es ist sehr wichtig zu verstehen, wie das funktioniert, also lassen wir es durchgehen. Schwebend unsere Links nach links gemacht alles Die Bilder erscheinen direkt hintereinander inline. Die absolute Positionierung der großen Bilder zieht sie jedoch aus diesem Fluss heraus und platziert sie spezifisch an der Stelle, die wir mit den Eigenschaften top und left festgelegt haben. Dadurch bleiben nur die Miniaturbilder frei.
Fortschrittskontrolle
Mit sehr wenig Code konnten wir unser Durcheinander von Bildern in ein übersichtliches Layout umwandeln. Beachten Sie, dass Sie zu diesem Zeitpunkt nur ein großes Bild sehen, da sich die anderen darunter befinden.
Bring es zum Leben
Nun, da alles vorhanden ist, ist es Zeit, dass es funktioniert. Das erste, was wir tun wollen, ist, alle großen Bilder mit Ausnahme unserer vorgestellten Abdeckung aus den Grenzen des Containers zu verschieben. Dies bedeutet, einen Schritt zurückzutreten und einige unserer bisherigen Codes zu überarbeiten.
Gehen Sie zurück und stellen Sie alle großen Bilder auf 900 Pixel von oben. Dies wird sie aus dem Boden unseres Containers drücken. Während Sie dort sind, sollten Sie auch einen Übergang einrichten. Richten Sie die oberste Eigenschaft aus, und legen Sie die Übergangsdauer auf eine Sekunde fest.
Dieser Code drückt alles von den großen Bildern außerhalb der Grenzen, einschließlich unseres Titelbildes. Verwenden Sie den untenstehenden Code, um diesen zurückzubringen.
Hier haben wir die oberen und linken Werte verwendet, die wir zuvor festgelegt hatten, um das Cover an einer Stelle zu fixieren. Der Z-Index-Wert stellt sicher, dass dieses Image am unteren Rand des Stapels verbleibt. Wenn wir das nicht tun, können wir die anderen Bilder nicht einmal sehen, wenn sie hineingleiten.
Hover-Stile
Nun, da wir alle großen Bilder außerhalb des Containers platziert haben, müssen wir sie zurückbringen, wenn der Benutzer schwebt. Dies wird erreicht, indem die großen Bilder als Ziel ausgewählt werden und die obere Eigenschaft auf 260px zurückgesetzt wird. Ich habe auch einen Schatteneffekt zu den Miniaturen hinzugefügt, damit Sie sehen können, wie der Schwebeflug wirkt.
Aufgrund der Art und Weise, wie wir unseren HTML-Code einrichten, entspricht jedes Miniaturbild automatisch dem zugehörigen großen Bild.Obwohl wir über dem Miniaturbild schweben, sieht der Browser dies als einen Anker und es macht nichts aus, nur den Teil mit der angewendeten großen Klasse zu manipulieren. Ziemlich ordentlich richtig?
Sehen Sie es in Aktion
Damit sind wir mit unserem fantastischen Slider fertig. Sehen Sie sich die Live-Demo unten an und bewegen Sie den Mauszeiger über die Miniaturbilder, um eine Probefahrt zu machen. Um die Vielseitigkeit dieses Projekts zu demonstrieren, habe ich zwei alternative Versionen in die Demo aufgenommen, die leicht unterschiedliche Animationen implementieren. Schauen Sie sich auch diese an.
Demo: Klicken Sie hier, um zu starten.
Fazit
Wenn Sie genau aufgepasst haben, haben Sie in diesem Tutorial viel gelernt. Erstens haben wir die Herausforderung überwunden, wie ein Teil eines HTML-Dokuments dazu verwendet werden soll, nur CSS zu verwenden, was keine leichte Aufgabe ist. Darüber hinaus haben wir ein paar coole Positionierungstechniken gelernt und uns sogar ein wenig mit der Manipulation der Bildstapelreihenfolge über Z-Index beschäftigt.
Wenn dir dieses Tutorial gefallen hat, hinterlasse einen Kommentar und lass es uns wissen. Hast du noch andere Verwendungsmöglichkeiten für Remote Hovers, wie wir sie hier verwendet haben? Ich möchte sie hören!