Das heutige Projekt macht Spaß. Wir werden einen Standard-CSS-Bildschieber mit einer Wendung erstellen: Der sichtbare Bildbereich wird in vier verschiedene Bereiche unterteilt, von denen jeder eine versteckte Nachricht enthält, die angezeigt wird, wenn der Benutzer darüber schwebt.
Der ultimative Effekt ist ziemlich großartig und ich denke, Sie werden ihn sehr mögen. Auf dem Weg werden wir mit einigen Animationen, Übergängen, Positionierungskontexten und vielem mehr spielen. Lass uns eintauchen und loslegen!
Vorgeschmack
Wenn Sie einen Blick auf das fertige Produkt werfen möchten, bevor wir es bauen, schauen Sie sich den untenstehenden Link an.
Demo: Klicken Sie hier, um die Live-Demo zu starten.
Requisiten auf, wie rollst du?
Meine Inspiration für das heutige Tutorial stammt von dem Sushi-Restaurant, in dem ich heute Abend essen möchte. Ich schaute auf ihrer Website nach Anweisungen und wollte sofort sehen, ob ich den Effekt auf der Startseite replizieren könnte. Das Restaurant heißt How Do You Roll. Gerne können Sie sich die fantastische Seite anschauen.
HTML
Lassen Sie uns dieses Projekt beginnen! Wie immer möchten wir zuerst unsere grundlegende HTML-Struktur skizzieren. Dieser Schieberegler besteht aus einem großen Bildbereich, der in vier vertikale Spalten unterteilt ist. Daher benötigen wir ein Wrapper-Div mit einem Schieberegler. Klasse und vier inneren Divs, jeweils mit einem? Panel? Klasse.
Dies ist unsere Grundstruktur, aber wir müssen sie mit etwas Inhalt ausarbeiten. Ich möchte, dass jedes Panel sowohl als Informationsquelle als auch als Link dient. Der Benutzer sollte also in der Lage sein, zu schweben, zu sehen, worum es im Panel geht, und auf klicken, um zu einer anderen Seite zu gelangen. Um dies zu erreichen, werfen wir ein h2 und einen Absatz ein und wickeln das ganze Ding in einen Anker. Es scheint eine seltsame Art zu sein, einen Anker zu verwenden, aber er ist in HTML5 vollkommen gültig.
Nun, da wir eine Gesamtstruktur haben und die individuelle Panel-Anordnung herausgefunden hat, haben wir alles zusammengestellt und haben alle HTML-Elemente, die wir für dieses Projekt benötigen.
Starter Styles
Um unser CSS zu starten, wollen wir ein paar allgemeine Dinge aus dem Weg räumen. Zuerst habe ich einen kleinen Universal-Reset durchgeführt, um uns alle auf dieselbe Seite zu bringen. Ersetzen Sie dies durch ein besseres Reset- oder Normalisierungsverfahren, wenn Sie dies in einem realen Projekt verwenden.
Ich habe auch eine Hintergrundtextur hinzugefügt und die Link-Styles für den Schieberegler zurückgesetzt, nur für ein gutes Maß.
Schieberegler CSS
Jetzt ist es Zeit, den Schieberegler div zu gestalten. Grundsätzlich möchten wir eine bestimmte Größe festlegen und ihm dann ein Hintergrundbild geben, das dieselbe Größe hat. Dann werden wir einige Ränder hinzufügen, um den Rand zu zentrieren, einen Randradius um die Ecken und einen Kästchenschatten, um ihn etwas vom Hintergrund abzugrenzen.
Die große Sache, die Sie in diesem Teil vermissen könnten, ist der Überlauf: Auto Line. Dies ist wichtig, weil wir möchten, dass unsere Fenster den abgerundeten Eckeneffekt erhalten, den wir auf den übergeordneten Schieberegler div anwenden.
Fortschrittskontrolle
An diesem Punkt sollten Sie ein großes Bild mit abgerundeten Ecken und einen Schatten sowie hässlichen, unordentlichen Text haben, den wir im nächsten Schritt korrigieren werden.
Panel CSS
Unser Slider-Container sieht scharf aus, jetzt ist es an der Zeit, die Paneele in Ordnung zu bringen. Da unser Container 800 x 400 Pixel groß ist, muss jedes Panel auf 200 Pixel x 400 Pixel eingestellt werden. Dies bedeutet, dass jedes Panel die volle Höhe und ein Viertel der Breite einnimmt. Von dort müssen wir sie einfach nach links schweben lassen und sie werden sich so anstellen, wie wir wollen.
Das Interessante dabei ist, dass ich Farbe und Hintergrund auf transparent gesetzt habe, wodurch die Panels unsichtbar werden. Das liegt daran, dass wir nur wollen, dass sie im Schwebeflug erscheinen. Der Standardzustand sollte tatsächlich verborgen sein.
Der letzte Schritt hier ist das Hinzufügen des CSS für eine Überblendung, sodass die Bedienfelder beim Einblenden des Benutzers eingeblendet werden. Beachten Sie, dass ich tatsächlich zwei separate Übergänge deklariert habe, die durch ein Komma getrennt sind (einer für die Farbe und einer für die Hintergrundfarbe).
Panel-Typografie
Als nächstes ist es Zeit, die Typografie in Ordnung zu bringen. Ich habe das zwar nicht mit den unsichtbaren Paneelen gemacht, sondern stattdessen den Elementen eine Farbe gegeben, sie gestylt und dann wieder versteckt.
Stellen Sie sicher, dass Sie sowohl den Absatz als auch den h2 formatieren. Ich habe den Kopf groß, kühn gemacht und bin ziemlich weit nach oben gerutscht. Sowohl die Kopfzeile als auch der Absatz erhalten eine festgelegte Breite von 150px, sodass sie trotz der linken Ausrichtung leicht im Raum zentriert werden können.
Panel Hover
Wenn der Benutzer über einem unserer Panels schwebt, möchte ich, dass es wieder sichtbar wird. Ich gebe dem Hintergrund und dem Text eine Farbe. Ich habe den Hintergrund auf Schwarz gesetzt, mit etwas Transparenz, um das darunterliegende Bild durchscheinen zu lassen, und den Absatz auf Weiß.
Fortschrittskontrolle
Sie sollten jetzt voll funktionsfähige Paneele haben! Wenn dies alles ist, was Sie erreichen wollten, können Sie hier aufhören, es sind keine weiteren Arbeiten erforderlich. Auch ohne den nächsten Schritt ist es ein toller Effekt.
Animieren Sie den Hintergrund
Dieser letzte Schritt ist vollständig optional und funktioniert mit älteren Browsern überhaupt nicht, aber die ursprüngliche Inspiration für dieses Stück hatte einen Bildschieber im Hintergrund. Wir haben dort ein statisches Bild und werden jetzt zurückgehen und es animieren.
Dazu müssen wir zum Deklarationsblock des Schiebereglers zurückkehren und ein paar Dinge hinzufügen. Verwandeln Sie zunächst Ihren einzelnen Hintergrund in vier Hintergrundbilder, wobei der letzte derselbe ist wie der erste, so dass sich alles schön dreht.
Stellen Sie als Nächstes sicher, dass Sie die Hintergrundbilder so einstellen, dass sie sich nicht wiederholen, und kopieren Sie die unten gezeigten Positionswerte. Dadurch werden die Bilder in einer langen horizontalen Reihe angeordnet.
Wie Sie sehen können, habe ich auch die Animation CSS eingefügt. Zuerst benennen wir unsere Animation (Schieberegler) und legen dann die Dauer und Anzahl der Iterationen fest. Um das gesamte Projekt abzuschließen, müssen wir definieren, wie diese Animation mit Keyframes funktioniert. Der Code dafür ist verwirrend, lasst uns jeden Schritt umreißen.
- Erster Schritt: Erstes Hintergrundbild sichtbar
- Zweiter Schritt: Verschiebe alles nach links um 800px, zweites Hintergrundbild sichtbar
- Schritt drei: Verschiebe alles nach links um 800px, drittes Hintergrundbild sichtbar
- Schritt 4: Verschiebe alles nach links 800px, viertes sichtbares Hintergrundbild (das gleiche wie das erste Bild)
Um dies aufzuteilen, müssen wir bei 0% beginnen und bei 100% enden, sodass zwei Schritte dazwischen bleiben. Die einfache Lösung besteht darin, die Schritte zwei und drei mit 33% und 66% zu machen. Die Mathematik ist nicht perfekt, aber nahe genug. Beachten Sie, wie die Bilder jedes Mal verschoben werden, um den nächsten Hintergrund anzuzeigen.
- 0%: Hintergrundposition: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% Hintergrundposition: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: Hintergrundposition: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: Hintergrundposition: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Jetzt allein wird die Diashow ständig in Bewegung gesetzt, was wir nicht wollen. Stattdessen wollen wir, dass jede Folie einige Sekunden still bleibt, bevor sie weiterbewegt wird. Dies wird durch Hinzufügen einiger weniger redundanter Schritte erreicht, so dass die Folien erst 10% vor dem nächsten Schritt vorrücken.
- 0%: Hintergrundposition: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 23%: Hintergrundposition: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% Hintergrundposition: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 56% Hintergrundposition: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: Hintergrundposition: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 90%: Hintergrundposition: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: Hintergrundposition: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Nachdem wir nun die Verarbeitung umrissen haben, können wir es mit CSS realisieren. Dies erfordert eine Unmenge an Code für die verschiedenen Browser, aber dies ist die einzige Möglichkeit, es zu schaffen, also müssen wir einfach damit leben.
Sehen Sie es in Aktion!
Wir sind alle fertig! Jetzt ist es an der Zeit, die Demo noch einmal anzuschauen.
Demo: Klicken Sie hier, um die Live-Demo zu starten.
Fazit
Ich hoffe, Ihnen hat es Spaß gemacht, diesen lustigen kleinen Slider genauso zu bauen wie ich. Ich finde es toll, wie es eine kleine Änderung an einer alten Idee darstellt. Es ist ziemlich praktisch und erlaubt Ihnen wirklich, Ihre Slider einen Schritt weiter zu gehen.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie denken. Haben Sie gesehen, dass ein Schieberegler so aufgeteilt wurde? Wie würdest du es besser machen?