Verwendung von CSS Clip Path zum Erstellen interaktiver Effekte, Teil II

Dies ist eine Fortsetzung meines vorherigen Beitrags über Clip-Pfade. Letztes Mal haben wir uns mit den Grundlagen des Zuschneidens beschäftigt und wie man damit anfängt. Wir haben uns einige Ideen angeschaut, um zu veranschaulichen, was wir mit Zuschneiden machen können. In diesem Beitrag gehen wir einen Schritt weiter und betrachten verschiedene Beispiele, diskutieren alternative Techniken und überlegen, wie wir unsere Arbeit cross-browser-kompatibel gestalten können.

Einer der größten Nachteile von CSS-Clipping ist zum Zeitpunkt der Erstellung dieses Artikels die Browserunterstützung. Keine 100%ige Browserabdeckung bedeutet unterschiedliche Erfahrungen für Betrachter in verschiedenen Browsern. Wir als Entwickler können nicht kontrollieren, welche Browser etwas unterstützen – Browserhersteller sind diejenigen, die die Spezifikation implementieren, und verschiedene Hersteller haben unterschiedliche Agenden.

Eine Sache, die wir tun können, um Inkonsistenzen zu überwinden, ist die Verwendung alternativer Technologien. Die Funktionsumfänge von CSS und SVG überschneiden sich manchmal. Was in einem funktioniert, kann auch im anderen funktionieren und umgekehrt. Tatsächlich existiert das Konzept des Zuschneidens sowohl in CSS als auch in SVG. Die SVG-Syntax zum Zuschneiden ist ganz anders, aber sie funktioniert gleich. Das Gute an SVG-Clipping im Vergleich zu CSS ist sein Reifegrad. Die Unterstützung reicht gut bis zu alten IE-Browsern zurück. Die meisten Fehler sind inzwischen behoben (oder man hofft es zumindest).

So sieht die Browserunterstützung für SVG-Clipping aus

Clipping als Übergang

Ein großartiger Anwendungsfall für Clipping sind Übergangseffekte. Nehmen Sie die Silhouette Slideshow Demo auf CodePen

Siehe den Pen Silhouette zoom slideshow von Mikael Ainalem (@ainalem) auf CodePen.

Eine "normale" Diashow durchläuft Bilder. Hier, um es etwas interessanter zu gestalten, gibt es einen Clipping-Effekt beim Wechseln der Bilder. Das nächste Bild betritt den Bildschirm durch eine Silhouette des vorherigen Bildes. Dies erzeugt die Illusion, dass die Bilder miteinander verbunden sind, auch wenn sie es nicht sind.

Die Übergänge folgen diesem Prozess

1. Identifizieren Sie den Fokuspunkt (d.h. das Hauptmotiv) des Bildes
2. Erstellen Sie einen Clipping-Pfad für dieses Objekt
3. Schneiden Sie das nächste Bild mit dem Pfad aus
4. Das ausgeschnittene Bild (Silhouette) blendet ein
5. Skalieren Sie den Clipping-Pfad, bis er größer als der Viewport ist
6. Schließen Sie den Übergang ab, um das nächste Bild anzuzeigen
7. Wiederholen!

Zerlegen wir die Sequenz, beginnend mit dem ersten Bild. Wir teilen dies in mehrere Pens auf, damit wir jeden Schritt isolieren können.

Silhouette zoom slideshow explained I von Mikael Ainalem (@ainalem) auf CodePen.

Dies ist die grundlegende Struktur des SVG-Markups

<svg>
  ...
  <image class="..." xlink:href="..." />
  ...
</svg>

Für dieses Bild möchten wir dann eine Maske des Fokuspunktes erstellen – in diesem Fall die Silhouette der Person. Wenn Sie unsicher sind, wie Sie einen Schnitt erstellen, werfen Sie einen Blick auf meinen vorherigen Artikel für weitere Details, denn ganz allgemein gesagt ist das Erstellen von Schnitten in CSS und SVG grundsätzlich dasselbe.

1. Importieren Sie ein Bild in den SVG-Editor
2. Zeichnen Sie einen Pfad um das Objekt
3. Konvertieren Sie den Pfad in die Syntax für SVG-Clip-Pfade. Dies kommt in den <defs>-Block des SVG.
4. Fügen Sie das SVG-Markup in das HTML ein

Wenn Sie geschickt mit dem Editor umgehen, können Sie die meisten der oben genannten Schritte im Editor durchführen. Die meisten Editoren unterstützen Masken und Clip-Pfade gut. Ich bevorzuge es, mehr Kontrolle über das Markup zu haben, daher erledige ich in der Regel zumindest einige Arbeiten von Hand. Ich finde, es gibt eine Balance zwischen der Arbeit mit einem SVG-Editor und der Arbeit mit Markup. Zum Beispiel organisiere ich gerne den Code, benenne die Klassen um und bereinige alles Übrige, das der Editor möglicherweise eingefügt hat.

Das Mozilla Developer Network macht gute Arbeit bei der Dokumentation von SVG-Clip-Pfaden. Hier ist eine reduzierte Version des Markups, das in der ursprünglichen Demo verwendet wurde, um Ihnen eine Vorstellung davon zu geben, wie ein Clip-Pfad hineinpasst.

<svg>
  <defs>
    <clipPath id="clip"> <!-- Clipping defined -->
      <path class="clipPath clipPath2" d="..." />
    </clipPath>
  </defs>
  ...
  <path ... clip-path="url(#clip)"/> <!-- Clipping applied -->
</svg>

Verwenden wir ein farbiges Rechteck als Platzhalter für das nächste Bild in der Diashow. Dies hilft, die Form des ausgeschnittenen Teils klar zu visualisieren und gibt eine klarere Vorstellung von Form und Bewegung.

Silhouette zoom slideshow explained II von Mikael Ainalem (@ainalem) auf CodePen.

Nun, da wir die Silhouette haben, schauen wir uns den eigentlichen Übergang an. Im Wesentlichen betrachten wir zwei Teile des Übergangs, die zusammenarbeiten, um den Effekt zu erzeugen.

• Zuerst blendet die Maske ein.
• Nach einer kurzen Verzögerung (200 ms) skaliert sich der Clip-Pfad hoch.

Beachten Sie den Translate-Wert in der Upscaling-Regel. Er ist da, um sicherzustellen, dass die Maske im Fokuspunkt bleibt, während sich die Dinge hochskalieren. Dies ist das CSS für diese Übergänge

.clipPath {
  transition: transform 1200ms 500ms; /* Delayed transform transition */
  transform-origin: 50%;
}

.clipPath.active {
  transform: translateX(-30%) scale(15); /* Upscaling and centering mask */
}

.image {
  transition: opacity 1000ms; /* Fade-in, starts immediately */
  opacity: 0;
}

.image.active {
  opacity: 1;
}

Hier ist, was wir bekommen – ein Bild, das zum Rechteck übergeht!

Silhouette zoom slideshow explained III von Mikael Ainalem (@ainalem) auf CodePen.

Nun ersetzen wir das Rechteck durch das nächste Bild, um den Übergang abzuschließen

Silhouette zoom slideshow explained IV von Mikael Ainalem (@ainalem) auf CodePen.

Die Wiederholung des obigen Verfahrens für jedes Bild ist die Art und Weise, wie wir mehrere Folien erhalten.

Das Letzte, was wir brauchen, ist die Logik, um durch die Bilder zu zirkulieren. Dies ist eine Frage der Buchführung, um zu bestimmen, welches das aktuelle Bild und welches das nächste ist und so weiter.

remove = (remove + 1) % images.length;
current = (current + 1) % images.length

Beachten Sie, dass dieses Beispiel zum Zeitpunkt der Erstellung dieses Artikels von Firefox nicht unterstützt wird, da es keine Unterstützung für das Skalieren von Clip-Pfaden bietet. Ich hoffe, dies wird in naher Zukunft behoben.

Clipping, um Vordergrundobjekte in den Hintergrund zu integrieren

Ein weiterer interessanter Einsatz von Clipping ist für Anzeige- und Verbergungseffekte. Wir können Teile der Ansicht erstellen, in denen Objekte teilweise oder vollständig verborgen sind, was eine unterhaltsame Möglichkeit ist, Hintergrundbilder mit Vordergrundinhalten interagieren zu lassen. Zum Beispiel könnten Objekte hinter Elementen im Hintergrundbild verschwinden, sagen wir ein Gebäude oder ein Berg. Es wird noch interessanter, wenn wir diese Idee mit Animations- oder Scroll-Effekten kombinieren.

Siehe den Pen Parallax clip von Mikael Ainalem (@ainalem) auf CodePen.

Dieses Beispiel verwendet einen Clipping-Pfad, um einen Effekt zu erzeugen, bei dem Text in das Foto eintaucht – genauer gesagt, hinter Bergen schwebt, wenn ein Benutzer nach unten scrollt. Um es noch interessanter zu machen, bewegt sich der Text mit einem Parallax-Effekt. Anders ausgedrückt, die verschiedenen Ebenen bewegen sich mit unterschiedlichen Geschwindigkeiten, um die Perspektive zu verstärken.

Wir beginnen mit einem einfachen div und definieren ein Hintergrundbild dafür im CSS

Parallax clip Explained I von Mikael Ainalem (@ainalem) auf CodePen.

Der Schlüsselteil im Foto ist die Linie, die die Vordergrundschicht von den Schichten im Hintergrund des Fotos trennt. Grundsätzlich wollen wir das Foto in zwei Teile teilen – ein perfekter Anwendungsfall für Clipping!

Folgen wir demselben Prozess, den wir zuvor behandelt haben, und schneiden Elemente aus, indem wir einer Linie folgen. Erstellen Sie in Ihrem Bildbearbeitungsprogramm einen Clipping-Pfad zwischen diesen beiden Schichten. Ich habe es so gemacht, dass ich einen Pfad entlang der Linie im Foto gezeichnet habe. Um den Pfad zu schließen, habe ich die Linie mit den oberen Ecken verbunden.

Hier ist eine visuelle Hervorhebung der Hintergrundebenen in Blau

Parallax clip Explained II von Mikael Ainalem (@ainalem) auf CodePen.

Jeglicher SVG-Inhalt, der unter dem blauen Bereich gezeichnet wird, wird teilweise oder vollständig verborgen. Dies erzeugt die Illusion, dass Inhalt hinter dem Hügel verschwindet. Hier ist zum Beispiel ein Kreis, der auf dem blauen Hintergrund gezeichnet ist, wenn ein Teil davon sich mit der Vordergrundschicht überschneidet.

Parallax clip Explained III von Mikael Ainalem (@ainalem) auf CodePen.

Sieht irgendwie aus wie der Mond, der über dem Berggipfel herausschaut!

Alles, was noch zu tun ist, um meine ursprüngliche Demo nachzubilden, ist, den Kreis durch Text zu ersetzen und ihn zu bewegen, wenn der Benutzer scrollt. Eine Möglichkeit, dies zu tun, ist über einen Scroll-Event-Listener.

window.addEventListener('scroll', function() {
  logo.setAttribute('transform',`translate(0 ${html.scrollTop / 10 + 5})`);
  clip.setAttribute('transform',`translate(0 -${html.scrollTop / 10 + 5})`);
});

Achten Sie nicht zu sehr auf die + 5, die bei der Berechnung der Distanz verwendet werden. Sie ist nur da als schlampige Methode, um das Element zu versetzen. Wichtig ist, wo die Dinge durch 10 geteilt werden, was den Parallax-Effekt erzeugt. Das Scrollen um einen bestimmten Betrag bewegt das Element und den Clip-Pfad proportional. Template Literals konvertieren den berechneten Wert in einen String, der für den Wert der Transform-Eigenschaft als Offset zu den SVG-Knoten verwendet wird.

Kombination von Clipping und Maskierung

Clipping und Maskierung sind zwei interessante Konzepte. Das eine erlaubt es Ihnen, Teile von Inhalten auszuschneiden, während das andere das Gegenteil erlaubt. Beide Techniken sind für sich allein nützlich, aber es gibt keinen Grund, warum wir ihre Kräfte nicht kombinieren sollten!

Wenn Sie Clipping und Maskierung kombinieren, können Sie Objekte aufteilen, um verschiedene visuelle Effekte auf verschiedenen Teilen zu erzeugen. Zum Beispiel

Siehe den Pen parallax logo blend von Mikael Ainalem (@ainalem) auf CodePen.

Ich habe diesen Effekt mit Clipping und Maskierung auf einem Logo erstellt. Der Text, der in zwei Teile geteilt ist, verschmilzt mit dem Hintergrundbild, einem wunderschönen monochromatischen Bild der Freiheitsstatue von New York. Ich verwende verschiedene Farben und Opazitäten auf verschiedenen Teilen des Textes, um ihn hervorzuheben. Dies erzeugt einen interessanten visuellen Effekt, bei dem der Text mit dem Hintergrund verschmilzt, wenn er sich mit der Statue überschneidet – ein Farbtupfer für ein ansonsten graues Bild. Neben Clipping und Maskierung gibt es hier auch einen Parallax-Effekt. Der Text bewegt sich mit unterschiedlicher Geschwindigkeit relativ zum Bild, wenn der Benutzer mit der Maus über das Bild fährt oder sich bewegt (berührt).

Um das Verhalten zu veranschaulichen, hier ist, was wir bekommen, wenn der maskierte Teil herausgenommen wird

parallax logo blend Explained I von Mikael Ainalem (@ainalem) auf CodePen.

Dies ist eigentlich ein eigenartig schönes Feature, da der Text scheinbar hinter der Statue entlangfließt. Das ist ein guter Einsatz von Clipping. Aber wir werden etwas kreative Maskierung einbringen, um den Text in die Statue verschmelzen zu lassen.

Hier ist dieselbe Demo, aber mit angewendeter Maske und deaktiviertem Clip

parallax logo blend Explained II von Mikael Ainalem (@ainalem) auf CodePen.

Beachten Sie, wie die Maskierung den Text mit der Statue kombiniert und die Statue als visuelle Begrenzung für den Text verwendet. Clipping erlaubt uns, den vollständigen Text anzuzeigen und dabei diese Verschmelzung beizubehalten. Wieder das Endergebnis

Siehe den Pen parallax logo blend von Mikael Ainalem (@ainalem) auf CodePen.

Zusammenfassung

Clipping ist eine unterhaltsame Möglichkeit, Interaktionen und visuelle Effekte zu erstellen. Es kann Diashows verbessern oder Objekte aus Bildern hervorheben lassen, unter anderem. Sowohl SVG als auch CSS bieten die Möglichkeit, Clip-Pfade und Masken auf Elemente anzuwenden, wenn auch mit unterschiedlichen Syntaxen. Wir können heutzutage praktisch jeden Webinhalt ausschneiden. Nur Ihre Vorstellungskraft setzt die Grenzen.

Wenn Sie etwas Cooles mit den hier behandelten Dingen erstellen, teilen Sie es bitte in den Kommentaren mit mir!