Heute arbeite ich an einem weiteren großartigen kostenlosen Download für PixelsDaily. Hier können Sie meine Denkprozesse, Ziele und Code sehen und später das gesamte Projekt herunterladen, um es in Ihrer eigenen Arbeit zu verwenden.
Im Grunde ist es unser Ziel, einen einfachen Effekt zu erzeugen, sodass ein verborgener Textbeschriftung sichtbar wird, wenn der Benutzer über ein Bild fährt. Dies ist natürlich sehr einfach zu bewerkstelligen. Daher werden wir einen Schritt weiter gehen, indem wir eine ganze Reihe von Optionen für den Entwickler erstellen. Auf diese Weise erhalten Sie einige bewährte Methoden, um flexible Effekte zu erstellen, die auf unterschiedliche Weise ohne zu viele Code-Wiederholungen angewendet werden können.
Vorgeschmack
Wenn Sie das Ergebnis unbedingt sehen möchten, bevor Sie den Code durchgehen, sehen Sie sich die Demo unten an und bewegen Sie den Mauszeiger über jedes Bild, um zu sehen, wie es sich unterscheidet.
Demo: Klicken Sie hier, um zu starten.
Der Plan
Wir möchten Folgendes: Eine einfache Textbeschriftung mit schwarzem Hintergrund, die über dem Bild angezeigt wird, wenn der Benutzer den Mauszeiger bewegt. Nun, da es animiert werden wird, habe ich insgesamt zehn verschiedene Variationen gefunden, die ungefähr dem gleichen Element entsprechen, das auf verschiedene Weise verwendet wird:
Hier haben wir zwei Hauptparameter. Der erste ist der Ort, an dem das Etikett zur Ruhe kommt (oben, in der Mitte oder unten), und der zweite ist der Ort, von dem es kommt (oben, rechts, unten, links). Wir möchten eine grundlegende, wiederholbare HTML-Struktur bereitstellen, die Entwickler beim Hinzufügen eines Bildes verwenden können, und ihnen einige Klassen geben, mit denen alles über das Verhalten des Labels gesteuert werden kann. In diesem Sinne können wir mit dem ersten Schritt fortfahren.
Das HTML
Status-Update
Wie Sie in der Abbildung unten sehen können, funktionieren alle unsere Etiketten jetzt und sehen perfekt aus. Beachten Sie, dass sie standardmäßig alle oben positioniert sind. Denken Sie daran, wenn wir vorwärts gehen und sie herumschieben.
Positionieren Sie jedes Etikett
Von hier aus haben wir viel zu tun. Wir haben wirklich ein bisschen Styling, aber wir müssen es zehnmal machen, weil jedes Label einzigartig ist. Für jedes Etikett müssen wir das Absatzelement außerhalb der Bildgrenzen positionieren und es dann wieder in den Hover bringen.
Zu Beginn möchten wir ein Etikett, das direkt über einem Bild beginnt, das beim Schweben nach unten fliegt und oben bleibt. Dazu setzen wir den Höchstwert auf -50%, der sich beim Schweben auf 0% ändert. Für den gleichen Effekt von unten beginnen wir ebenfalls mit einem unteren Wert von -50% und ändern diesen Wert in 0%.
Meine Methode hier ist sehr spezifisch. Der kniffligste Teil dieser ganzen Idee besteht darin, herauszufinden, wie man sie bei einer Vielzahl von Bildgrößen einsetzen kann. Wir möchten nicht, dass der Entwickler jedes Mal manuell eine Größe eingeben muss. Es sollte nur funktionieren, wenn jemand auf die erforderlichen Klassen schlägt.
Durch die Verwendung der oberen und unteren Eigenschaften wie wir sind, stellen wir sicher, dass nichts von der Bildgröße abhängt. Der Wert von 0% für die unterste Eigenschaft wird angegeben immer Schieben Sie unser Etikett ganz nach unten in das Bild, auf das wir es anwenden, egal wie weit dies auch sein mag.
Als nächstes müssen wir unsere Etiketten gestalten, die von den Seiten her einschwenken. Wir können von links oben, rechts oben, links unten und rechts unten einschwenken. Hier sind die Werte für diese. Die Methode ist unkompliziert und genau wie die beiden, die wir gerade besprochen haben. Jedes Mal, wenn wir die Ruheposition auf eine Seite stellen, wird sie mit dem Schwebeflug wieder sichtbar. Für diese kommen die linken und rechten Eigenschaften zusätzlich zu den oberen und unteren Eigenschaften zum Einsatz.
Zum Abschluss müssen wir unsere zentrierten Etiketten codieren. Dies sind die schwersten, die es herausfinden können. Im Hover-Modus möchten Sie sie fünfzig Prozent des Wegs nach unten oder oben, minus der Hälfte der Etikettenhöhe, platzieren. Wenn wir also von oben nach innen schieben wollen, setzen wir den oberen Wert auf 50% und einen negativen Rand von 20px (halbe Etikettenhöhe). Dies setzt leider eine einzelne Textzeile und die von uns eingerichtete Schriftgröße voraus. Wenn sich eines der Elemente ändert, ändert sich die Höhe, und das Element wird nicht zentriert. Die einzige Möglichkeit, die ich kenne, ist die Verwendung einer Art Anzeige: Tabelle Konfiguration.
Optional: Weiter gehen
Wenn Sie sich nun für Wiederholungen begeistern, können Sie noch weiter gehen und sicherstellen, dass Ihr Code so kurz wie möglich ist. Wir haben jedes Etikett aus Gründen der besseren Lesbarkeit herausgetrennt, aber das Ergebnis sind viele Werte, die sich durchgängig wiederholen. Wir könnten entweder Selektoren manuell kombinieren oder Sass @extend verwenden und ein viel prägnanteres Ergebnis erzielen. Der Kompromiss hier ist natürlich, dass Sie Ihre Selektoren wiederholen, da einige an mehreren Stellen erscheinen.
Sehen Sie es in Aktion
Wir sind alle fertig! Schauen Sie sich die Live-Demo unten an und bewegen Sie den Mauszeiger über jedes Bild, um den unterschiedlichen Effekt zu sehen.
Demo: Klicken Sie hier, um zu starten.
Fazit
Dieses Projekt zwang uns zu einer guten Denkweise. Wir mussten mehrmals überlegen, wie wir unseren Code kurz und frei von Wiederholungen halten können. Wir haben auch ständig gefragt, was am besten ist, wenn wir möchten, dass andere unseren Code ohne großen Aufwand herunterladen und ändern können. Wenn wir einen Weg gesehen haben, wie wir unseren Code prägnanter gestalten können, hat dies manchmal den Preis für Lesbarkeit und Benutzerfreundlichkeit, was nicht die beste Methode für einen kostenlosen Download ist.
Fühlen Sie sich frei, diesen Code zu packen und ihn zu benutzen, wie Sie möchten. Halten Sie nach PixelsDaily auch in den kommenden Wochen Ausschau nach dem Download.