Erstellen Sie eine fantastische animierte Thumbnail-Galerie mit CSS

Heute werden wir mehr Spaß mit CSS3-Übergängen haben. Es gibt einen beliebten jQuery-Trick, der den Ausschnitt eines Bildes erweitert, wenn Sie mit der Maus darüber fahren. Ich wollte es nur mit CSS replizieren. Um die Dinge weiter voranzutreiben, setze ich diesen Effekt in einer Miniaturansicht-Galerie ein.

Lesen Sie weiter, um die Live-Demo zu sehen, und folgen Sie Schritt für Schritt, um zu erklären, wie dies funktioniert, und erstellen Sie das Ganze von Grund auf.

Was wir bauen

Nur für den Fall, dass Sie die Art von Person sind, die gerne bis zum Ende eines Buches springt und einen Blick darauf werfen wird, wie sich alles entwickelt, ist hier eine fertige Demo dessen, was wir erstellen werden.

Live Demo: Hier klicken

Konzeptioneller Beweiß

Bevor wir mit dem Entwerfen einer vollständigen Galerieseite beginnen, wollen wir eine kleine Version erstellen, um ein Gefühl dafür zu bekommen, was wir erreichen wollen. Die Grundidee ist eine Miniaturansichten-Galerie, in der jede Miniaturansicht beschnitten wird, um nur einen Teil eines größeren Bildes anzuzeigen. Wenn Sie den Mauszeiger über ein Bild bewegen, wird die Miniaturansicht erweitert, um das gesamte Bild anzuzeigen.

HTML

Um zu beginnen, erstellen Sie eine einfache HTML-Seite und geben Sie einige Divs ein (siehe unten). Hier habe ich einen Basiscontainer und dann drei Bilder. Für das, was wir tun, können wir die Bilder nicht einfach direkt stylen, ohne ein unbeholfenes Dehnen. Daher müssen wir jedes Bild in sein eigenes Div setzen.

<img src="//lesptitesaffairesdemayl.be/img/images_1/create-an-awesome-animated-thumbnail-gallery-with-css_2.jpg"> <h3>CSS: Hover-Übergänge</h3> <p>Jetzt den Hover-Effekt hinzufügen. Das erste, was wir tun wollen, ist, die Miniaturansichten auszudehnen, wenn Sie die Maus darüber halten. Dies wird leicht mit der Hover-Pseudo-Klasse erreicht.</p> <textarea wrap="soft" readonly=""> .box: Schwebeflug {Breite: 400px; }

Mit diesem Code erhalten wir nun die grundlegenden Layoutänderungen, die wir wünschen. Dies ist wichtig, da dies bedeutet, dass alle Browser, die das, was wir als Nächstes tun, nicht unterstützen, auch auf dieser Seite einwandfrei funktionieren, wenn auch in vereinfachter Form.

Um den Effekt noch interessanter zu gestalten, werfen wir einen grundlegenden CSS-Übergang ein. Zuerst legen wir fest, dass die Breite das ist, was wir anvisieren möchten, dann implementieren wir eine Dauer und wie die Animation voranschreiten soll (Beschleunigung). Schließlich stellen wir wie immer sicher, dass unsere Basis mit den Browser-Präfixen abgedeckt wird.

Wenn Sie sich hinsichtlich eines CSS3-Übergangs oder einer anderen Syntax für diese Weise nicht sicher sind, besuchen Sie CSS3Maker.com, das den Code für Sie aus einfachen Steuerelementen generiert.

.box {float: left; Breite: 150px; Überlauf versteckt; Marge: 0 10px 0 0; -webkit-Übergang: Breite 1s Einstieg; -Moz-Übergang: Breite 1s Einstieg; -o-Übergang: Breite 1s Einstieg; } .box: hover {width: 400px; }

Vorschau

Das ist alles dazu! Damit haben wir einen coolen Schiebetüreneffekt, ähnlich dem, was Sie häufig in jQuery sehen. Klicken Sie hier oder auf das Bild, um eine Live-Vorschau von dem anzuzeigen, was wir gerade gebaut haben.

Wie Sie sehen, dehnt sich das Bild langsam aus, wenn Sie über ein Bild fahren. Das Layout passt sich gut an, wenn sich die anderen Bilder bewegen. Es ist super einfach, aber es macht Spaß, damit zu spielen.

Weiter geht's: Eine Thumbnail-Galerie

Nachdem wir unser Grundkonzept herausgefunden haben und reibungslos funktionieren, ist es an der Zeit zu sehen, wie Sie eine gesamte Webseite nach diesem Konzept gestalten können. Anstelle von nur drei Bildern werden wir uns zu einer größeren Galerie von Miniaturansichten erweitern. Beginnen wir mit etwas HTML.

Bilder HTML

Als erstes wollen wir unsere Bilder so gestalten, wie wir es zuvor getan haben. Dieses Mal werden wir jedoch zwei Reihen von vier haben. Beachten Sie, dass ich sie in zwei verschiedene Abschnitte unterteilt habe. Meine ursprüngliche Idee war, die Galerie umfließen zu lassen, damit ein Bild erweitert und die anderen nach vorne geschoben werden, so springen sie automatisch in die nächste Reihe. Das funktionierte zunächst großartig, aber ich bemerkte, dass das Schweben über dem letzten Bild in Folge problematisch war, da es während des Schwebens nach unten springen würde. Es hat funktioniert, war aber einfach zu umständlich. Ich denke, diese Lösung ist viel eleganter und dennoch leicht erweiterbar.

<img src="//lesptitesaffairesdemayl.be/img/images_1/create-an-awesome-animated-thumbnail-gallery-with-css_4.jpg"> <h3>Übergangs-CSS</h3> <p>Um dieses Ding zum Laufen zu bringen, müssen wir lediglich einen Hover-Effekt und einen Übergang hinzufügen. Ich habe den gleichen Übergang wie zuvor angewendet, aber ich habe die Größe der erweiterten Breite geändert. Ich wollte, dass das Raster schön und sauber bleibt, sodass die erweiterte Breite eines Bildes genau den gleichen Platz einnimmt wie zwei nicht erweiterte Bilder.</p> <p>Da jedes Bild 150 Pixel breit ist, sind zwei Bilder offensichtlich 300 Pixel breit. Es wird jedoch auch ein Rand von 5 Pixeln hinzugefügt, und wenn wir dies berücksichtigen, sehen wir, dass die richtige Größe für das erweiterte Miniaturbild 310 Pixel beträgt.</p> <textarea wrap="soft" readonly=""> .slidingBox {float: left; Breite: 150px; Überlauf versteckt; Marge: 0 10px 5px 0; -webkit-Übergang: Breite 1s Einstieg; -Moz-Übergang: Breite 1s Einstieg; -o-Übergang: Breite 1s Einstieg; } .slidingBox: hover {width: 310px; }

Mit diesem Code ist unsere Galerie komplett. Die Animationen sind fließend und mehrere Reihen machen den Effekt wirklich beeindruckender. Wenn Sie eine weitere Zeile hinzufügen möchten, kopieren und fügen Sie eine galleryRow div ein. Es ist kein CSS mehr erforderlich.

So sieht die Galerie jetzt aus. Beachten Sie, dass das erweiterte Bild genau so breit ist wie die beiden kleineren Bilder darunter.

Fertigstellung der Seite: HTML

Ich mag es nie, ein Beispiel so einfach zu hinterlassen, also lassen wir das Design fertig. Dazu fügen wir eine grundlegende Kopfzeile und einen Absatz hinzu, die die Galerie erläutern.

<h1>CSS Schiebetüren</h1> <p>Lorem ipsum dolor sitzen amet? </p>

Ich werde dieses Snippet auch in meinen Header werfen, damit ich "Oswald" verwenden kann. aus der Google Font Library.

Fertigstellung der Seite: CSS

Der letzte Schritt besteht darin, diese beiden Textteile zu gestalten. Beachten Sie, dass ich die Schriftart für die Schriftart verwende, was in unserem CSS eine Menge Platz spart. Sie können sehen, dass ich die Oswald-Schriftart genauso deklariert habe, wie ich es auch bei anderen Schriftarten tun würde. Obwohl die Optionen immer noch recht begrenzt sind, finde ich es wirklich toll, wie einfach und uneingeschränkt die Google Font Library implementiert werden kann.

h1 {font: fett 75px / 95px 'Oswald', arial, serif; Text-Transformation: Großbuchstaben; } #theText {width: 650px; Schrift: 15px / 25px Helvetica, serifenlos; Rand unten: 25px; }

Fertiges Produkt

Unser kleines Projekt ist jetzt abgeschlossen. Sehen Sie sich die Live-Demo unten an, um sie in Aktion zu sehen. Ist es nicht toll, wie viel wir jetzt ohne eine einzige JavaScript-Zeile erreichen können?

Live Demo: Hier klicken

Hinterlasse einen Kommentar und lass uns wissen, was du von diesem Effekt hältst. Erwähnen Sie auch unbedingt Ihre Ideen zur Verbesserung!