Thumbnail-Galerien faszinieren mich immer wieder. Es macht so viel mehr Spaß, als einfach ein Raster von Plätzen zu erstellen und es als Tag zu bezeichnen. Zumal wir mit CSS3 so viele leistungsstarke neue Werkzeuge zur Verfügung stellen.
Heute mischen wir die langweilige alte Standard-Bildergalerie, indem wir sie in eine Reihe animierter Kreise verwandeln. Auf dem Weg lernen wir eine Menge hilfreiche CSS-Kenntnisse, die Ihnen bei zukünftigen Projekten helfen werden.
Vorgeschmack
Wenn Sie zu denen gehören, die gerne bis zum Ende springen, um zu sehen, wohin Sie gehen, sehen Sie sich die Live-Demo des fertigen Produkts unten an. Ich habe drei verschiedene Versionen der Animation beigefügt, um Ihnen Anregungen zu geben, wie Sie den Effekt variieren können.
Demo: Klicken Sie hier, um zu starten.
Das Konzept
Bevor wir mit dem Erstellen der Miniaturbild-Galerie beginnen, lassen Sie uns ein wenig darüber sprechen, was wir erreichen wollen. Ziel ist es, ein Raster kreisförmiger Bilder zu erstellen, die beim Schweben animiert werden. Wenn die Maus in den Kreis eintritt, sollte sich das Hintergrundbild verschieben und eine zuvor ausgeblendete Bildunterschrift sollte in den Blickfeld geraten. Klingt ziemlich einfach, oder? Es gibt jedoch einen großen Kurveball.
Als ich mir vorstellte, wie ich dieses Kunststück vollbringen sollte, kam mir etwas auf den Grund. Der einfachste und einfachste Weg, den gleitenden Bildeffekt zu implementieren, ist die Verwendung von CSS-Hintergrundbildern. Dieser Weg hat viele praktische Vorteile für uns.
Hintergrundbild Pros
- Das Bild wird automatisch hinter dem Text platziert
- Es ist einfach, das Bild an das übergeordnete Element anzuhängen
- Das Animieren des Bildes ist einfach, verschieben Sie einfach die Hintergrundposition
Wie Sie sehen, gibt es ein starkes Argument, um diesen Weg zu gehen. Der stärkste Nutzen ist wahrscheinlich der erste. Wenn wir unseren gesamten Inhalt in HTML einfügen, drückt der Text das Bild tatsächlich herum, anstatt darüber zu schweben. Daher müssen wir ein paar CSS-Voodoo-Dateien ausführen.
Wenn ich nur mit einem einzelnen Bild arbeiten würde, wäre dies definitiv der Weg, den ich nehmen würde. Da wir jedoch mit einer Bildergalerie arbeiten, ist es irgendwie falsch, die Bilder aus dem HTML-Code zu entfernen. Sie sind wirklich der Fokus des Inhalts der Seite, daher denke ich, dass sie mit dem Inhalt einverstanden sein sollten. Ich denke zwar über das Nachdenken nach, aber ich denke, Miniaturbilder-Galerie-Bilder sollten wenn möglich über HTML eingefügt werden. Egal, diese Route macht die Aufgabe sicherlich anspruchsvoller, was für Bildungszwecke von Vorteil ist! Schauen wir uns einige Komplikationen an, denen wir mit dieser Methode begegnen werden.
HTML Image Cons
- Es ist etwas komplizierter, wenn das Bild auf einen Kreis zugeschnitten wird
- Das Verschieben des Bildes ist nicht so einfach
- Unsere Stapelreihenfolge wird alles schief gehen
- Die relative Positionierung mit abgerundeten Ecken ist ein Durcheinander
Sie sehen, wir haben unsere Arbeit für uns erledigt. Glücklicherweise ist es nicht so schwierig, wie es sich anhört, und mit ein wenig Einfallsreichtum haben wir in kürzester Zeit unsere Galerie in Betrieb. Lass uns anfangen!
Das HTML
Das Markup für diese Galerie wird sehr kurz sein. Alles was wir wirklich brauchen, ist eine ungeordnete Liste. Platzieren Sie in jedes Listenelement einen Text und anschließend ein Bild (Sie können das Bild optional an eine andere Stelle verlinken, ich habe es der Einfachheit halber weggelassen).
Beachten Sie, dass die Containerbreite nicht beliebig ist. Es ermöglicht vier Bildern bei 200px ein Stück mit einem Rand von 50px (250 * 4 = 1.000).
Fortschrittsbericht
Zu diesem Zeitpunkt sollte Ihr Hintergrund dunkel sein und die Aufzählungspunkte auf Ihren Listenelementen sollten verschwunden sein. Ansonsten sieht es weitgehend wie beim letzten Mal aus. Klicken Sie hier, um das Live-Dabblet zu starten.
Line 'Em Up, Round' Em Off
Als Nächstes müssen wir die Listenelemente anvisieren. Stellen Sie sicher, dass Sie einen spezifischeren Selektor verwenden als? Li? Sie möchten sicher, dass alle Ihre Listenelemente dieses Styling haben. Die Gallerie? Die Klasse bietet einen praktischen Haken, um diese Stile für die von Ihnen eingerichteten Galerien zu definieren.
Trotz der Tatsache, dass unsere Bilder ein Quadrat von 400 Pixeln sind, möchten wir eigentlich, dass die Kreise auf der Seite ein Quadrat von 200 Pixeln sind. Legen Sie dazu einfach 200px als Höhe und Breite für die Listenelemente fest. Um die Listenelemente abzurunden, setzen Sie den Randradius auf 50%. Sie werden dies nicht sehen, wenn Sie den Überlauf anwenden: ausgeblendet? Befehl. Achten Sie auch darauf, sie nach links zu schweben, damit sie in einer geraden Linie erscheinen.
Es ist wichtig zu wissen, dass wir dies alles für das Listenelement tun, nicht für die Bilder. Dies bedeutet, dass die Bilder immer noch ihre Originalgröße behalten, sie werden einfach auf die Größe des Listenelements zugeschnitten, sodass sie später verschoben werden können.
Fortschrittsbericht
Danach sollte Ihre Galerie Gestalt annehmen. Sie sollten vier kreisförmige Bilder pro Zeile haben, wobei der übergeordnete Container zentriert ist. Das Seltsame ist, dass unsere Kreise oben liegen! Dies liegt einfach daran, dass unsere Bilder in Position gebracht werden müssen, die wir als Nächstes behandeln werden. Klicken Sie hier, um das Live-Dabblet zu starten.
Scoot und die Animation einstellen
Wie wir im letzten Schritt gesehen haben, sind unsere Bilder tatsächlich zu weit unten.Wir können dies beheben, indem Sie auf alle Bilder in unseren Galerie-Listenelementen zielen und einen negativen Rand auf die Oberseite anwenden.
Während wir hier sind, werden wir auch die Animation einrichten. Wir haben gerade gelernt, dass wir das Bild mit Rändern drehen können. Dies ist also die Eigenschaft, die wir für den Übergang festlegen möchten.
Fortschrittsbericht
Der einzige visuelle Unterschied, den Sie dieses Mal bemerken, ist, dass die flache Oberseite der Kreise korrigiert wurde. Klicken Sie hier, um das Live-Dabblet zu starten.
Stilieren Sie die Absätze
Sie haben wahrscheinlich bemerkt, dass unsere Absätze bis zu diesem Punkt vollständig verborgen wurden. Dies liegt daran, dass sie über den Bildern und außerhalb der Grenzen des abgeschnittenen Listenelements angeordnet sind. Das zu beheben ist nicht so einfach, wie Sie vielleicht denken.
Der erste Gedanke, der mir in den Sinn kam, war einfach der alte absolute / relative Positionierungstrick. Dazu müssen Sie die Position der Absatzelemente auf absolut und das Listenelement auf relativ setzen. Dies würde es uns ermöglichen, den Absatz relativ zum Startpunkt des Listenelements in Position zu bringen. Leider gibt es einen Fehler bei der Art und Weise, wie die meisten Browser den Randradius darstellen, wie im Bild unten dargestellt.
Wie Sie sehen können, werden wir in dem Moment, in dem wir eine relative Positionierung auf unser übergeordnetes Element anwenden, seine abgerundeten Ecken verlieren. Dies ist definitiv ein Ärgernis, aber es ist nicht das Ende der Welt. Stattdessen verwenden wir einfach die relative Positionierung in unserem Absatz und rollen ihn mit oben und links ein.
Dadurch wird unser Absatz sichtbar und wir können einige grundlegende Textstile anwenden. Wir richten auch die Animation für den Text ein, aber anstatt den Rand wie zuvor zu verwenden, verwenden wir die Top-Eigenschaft.
Beachten Sie, dass ich das? Top? Eigentum zu 75% in diesem Schritt. Dies dient lediglich dazu, einen Sweet Spot für den letzten Ruhepunkt der Absätze zu finden. In der Realität möchten wir, dass sie ausgeblendet werden. Setzen Sie also den Höchstwert auf 110%.
Fortschrittsbericht
Nach diesem Schritt sollten Ihre Textausschnitte jetzt am unteren Rand Ihrer Kreise sichtbar sein. Klicken Sie hier, um das Live-Dabblet zu starten.
Legen Sie Ihre Hover-Stile fest
Jetzt, wenn alles so eingerichtet und positioniert ist, wie wir es brauchen, müssen wir alles verschieben, wenn der Benutzer über die Listenelemente schwebt. Dazu verwenden wir einen einfachen Trick, bei dem wir die Listenelemente im Hover als Ziel festlegen, dann aber ein untergeordnetes Element dieses Elements zum Ändern auswählen. Zu Beginn zielen wir auf die Listenelemente im Schwebeflug und zeigen dann mehr an, dass die Bilder das sind, was wir ändern. Wir wiederholen diesen Trick mit den Absätzen.
Wenden Sie für die Bilder eine vertikale und horizontale Verschiebung am Rand an, und bringen Sie für den Absatz den oberen Wert auf die 75% zurück, für die wir uns zuvor entschieden haben.
Fortschrittsbericht
Damit funktioniert unsere Demo endlich so, wie wir es wollen! Bewegen Sie den Mauszeiger über jedes der Bilder, um den Effekt in Aktion zu sehen. Klicken Sie hier, um das Live-Dabblet zu starten.
Fertiges Produkt
Wir sind alle fertig! Wie ich bereits im Intro erwähnt habe, enthält die Demo-Seite auch einige alternative Versionen des Effekts. Insgesamt gibt es drei: Schwenken, Vergrößern und Verkleinern. Klicken Sie auf den Link unten, um es auszuprobieren.
Demo: Klicken Sie hier, um zu starten.
Fazit
Dieses Projekt dehnte unsere Komfortzone aus, indem es sich einem animierten Hintergrund anders näherte. Anstatt CSS zum Platzieren des Bildes zu verwenden, konnten wir den Effekt sowohl mit Text als auch mit Bild in unserem Markup ableiten. Es ist so etwas wie das typische "weniger Markup". Strategie, aber es ist eine gute Lernerfahrung. Wenn Sie mit beiden Szenarien arbeiten können, werden Sie zu einem besseren Codierer, der viele verschiedene Hürden bewältigen kann.
Nebenbei bemerkt ist eines der Dinge, die mich immer mit CSS stören, die Tatsache, dass das beim Laden der Seite häufig unbeabsichtigte visuelle Effekte auslöst. Während die Seite gezeichnet wird, machen die Übergänge den normalerweise sofortigen Prozess lang und unhandlich. Ich weiß, dass dies mit JavaScript angesprochen werden kann, aber wenn Sie eine reine CSS-Lösung haben, würde ich es gerne hören. Für die Demo habe ich die Animationen einfach auf die Hover-Selektoren angewendet, aber das hebt die Schwebeflug-Animation ab. Kennen Sie einen besseren Weg? Lass es mich in den Kommentaren wissen.