Lassen Sie uns einen Bild-Pop-Out-Effekt mit SVG-Clip Pfad erstellen

Vor ein paar Wochen bin ich auf diesen coolen Pop-Out-Effekt von Mikael Ainalem gestoßen. Er zeigt die CSS-Eigenschaft clip-path: path(), die gerade breite Unterstützung in den meisten modernen Browsern erhalten hat. Ich wollte dem selbst nachgehen, um besser zu verstehen, wie es funktioniert. Dabei stieß ich jedoch auf einige Probleme mit clip-path: path(); und fand schließlich einen alternativen Ansatz, den ich Ihnen in diesem Artikel vorstellen möchte.

Wenn Sie clip-path noch nicht verwendet haben oder damit nicht vertraut sind, ermöglicht es uns im Grunde, eine Anzeigeregion für ein Element basierend auf einem Clipping-Pfad festzulegen und Teile des Elements, die außerhalb des Clipping-Pfads liegen, zu verbergen.

Mögliche Werte für clip-path sind circle, ellipse und polygon, die die Anwendungsfälle auf diese spezifischen Formen beschränken. Hier kommt der neue Wert path ins Spiel – er ermöglicht uns die Verwendung eines flexibleren SVG-Pfades, um verschiedene Clipping-Pfade zu erstellen, die über einfache Formen hinausgehen.

Nehmen wir das, was wir über clip-path wissen, und beginnen wir mit dem Hover-Effekt. Die Grundidee ist, dass das Vordergrundbild einer Person beim Hovern über das Element scheinbar aus dem bunten Hintergrund herausspringt und seine Größe skaliert. Ein wichtiges Detail ist, wie die Animation des Vordergrundbildes (Skalierung nach oben und Verschiebung nach oben) unabhängig von der Animation des Hintergrundbildes (nur Skalierung nach oben) zu sein scheint.

Dieser Effekt sieht cool aus, aber es gibt einige Probleme mit dem path-Wert. Erstens, obwohl wir erwähnt haben, dass die Unterstützung im Allgemeinen gut ist, ist sie nicht hervorragend und liegt zum Zeitpunkt des Schreibens bei etwa 82 % Abdeckung. Beachten Sie also, dass die mobile Unterstützung derzeit auf Chrome und Safari beschränkt ist.

Abgesehen von der Unterstützung ist das größere und bizarrere Problem mit path, dass es **derzeit nur mit Pixelwerten funktioniert**, was bedeutet, dass es nicht responsiv ist. Wenn wir zum Beispiel auf der Seite zoomen. Sofort beginnt die Pfadform, Dinge abzuschneiden.

Dies schränkt die Anzahl der Anwendungsfälle für clip-path: path() stark ein, da es nur auf Elementen mit fester Größe verwendet werden kann. Responsive Webdesign ist seit vielen Jahren ein weithin akzeptierter Standard, daher ist es seltsam, eine neue CSS-Eigenschaft zu sehen, die diesem Prinzip nicht folgt und ausschließlich Pixelwerte verwendet.

Wir werden diesen Effekt mit Standard-CSS-Techniken neu erstellen, die breit unterstützt werden, sodass er nicht nur funktioniert, sondern auch wirklich responsiv ist.

Der knifflige Teil

Wir möchten, dass alles, was über den clip-path hinausgeht, nur im oberen Teil des Bildes sichtbar ist. Wir können keine standardmäßige CSS-overflow-Eigenschaft verwenden, da sie sich sowohl auf die Ober- als auch auf die Unterseite auswirkt.

Was sind also unsere Optionen neben overflow und clip-path? Nun, verwenden wir einfach <clipPath> in der SVG selbst. <clipPath> ist eine SVG-Eigenschaft, die sich von der neu veröffentlichten und nicht responsiven clip-path: path unterscheidet.

SVG <clipPath> Element

SVG <clipPath> und <path> Elemente passen sich dem Koordinatensystem des SVG-Elements an, sodass sie out-of-the-box responsiv sind. Wenn das SVG-Element skaliert wird, wird auch sein Koordinatensystem skaliert, und es behält seine Proportionen basierend auf den verschiedenen Eigenschaften bei, die eine breite Palette möglicher Anwendungsfälle abdecken. Als zusätzlicher Vorteil hat die Verwendung von clip-path in CSS auf SVG eine 95% Browserunterstützung, was eine Steigerung um 13 % gegenüber clip-path: path darstellt.

Beginnen wir mit dem Einrichten unseres SVG-Elements. Ich habe Inkscape verwendet, um die grundlegende SVG-Markup und die Clipping-Pfade zu erstellen, nur um es mir einfacher zu machen. Danach habe ich das Markup aktualisiert, indem ich meine eigenen Klassenattribute hinzugefügt habe.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 100 120" class="image">
  <defs>
    <clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
      <path d="..." />
    </clipPath>
    <clipPath id="maskBackground" clipPathUnits="userSpaceOnUse">
      <path d="..." />
    </clipPath>
  </defs>
  <g clip-path="url(#maskImage)" transform="translate(0 -7)">
    <!-- Background image -->
    <image clip-path="url(#maskBackground)" width="120" height="120" x="70" y="38" href="..." transform="translate(-90 -31)" />
    <!-- Foreground image -->
    <image width="120" height="144" x="-15" y="0" fill="none" class="image__foreground" href="..." />
  </g>
</svg>

Dieses Markup kann problemlos für andere Hintergrund- und Vordergrundbilder wiederverwendet werden. Wir müssen nur die URL im href-Attribut innerhalb der image-Elemente ersetzen.

Jetzt können wir an der Hover-Animation in CSS arbeiten. Wir können mit Transformationen und Übergängen auskommen, sicherstellen, dass das Vordergrundbild gut zentriert ist, und dann die Dinge skalieren und verschieben, wenn der Hover stattfindet.

.image {
  transform: scale(0.9, 0.9);
  transition: transform 0.2s ease-in;
}

.image__foreground {
  transform-origin: 50% 50%;
  transform: translateY(4px) scale(1, 1);
  transition: transform 0.2s ease-in;
}

.image:hover {
  transform: scale(1, 1);
}

.image:hover .image__foreground {
  transform: translateY(-7px) scale(1.05, 1.05);
}

Hier ist das Ergebnis des obigen HTML- und CSS-Codes. Versuchen Sie, die Bildschirmgröße zu ändern und die Abmessungen des SVG-Elements anzupassen, um zu sehen, wie der Effekt mit der Bildschirmgröße skaliert.

Das sieht großartig aus! Wir sind jedoch noch nicht fertig. Wir müssen noch einige Probleme angehen, die jetzt auftreten, da wir das Markup von einem HTML-Bildelement zu einem SVG-Element geändert haben.

SEO und Barrierefreiheit

Inline-SVG-Elemente werden nicht von Suchmaschinen-Crawlern indexiert. Wenn die SVG-Elemente ein wichtiger Bestandteil des Inhalts sind, kann die SEO Ihrer Seite darunter leiden, da diese Bilder wahrscheinlich nicht erfasst werden.

Wir benötigen zusätzliche Markup, das ein reguläres <img>-Element verwendet, das mit CSS ausgeblendet wird. Auf diese Weise deklarierte Bilder werden automatisch von Crawlern erfasst, und wir können Links zu diesen Bildern in einer Bild-Sitemap bereitstellen, um sicherzustellen, dass die Crawler sie finden. Wir verwenden loading="lazy", was dem Browser erlaubt zu entscheiden, ob das Laden des Bildes verzögert werden soll.

Wir werden beide Elemente in ein <figure>-Element einwickeln, damit wir die Beziehung zwischen diesen beiden Bildern kennzeichnen und sie gruppieren

<figure>
  <!-- SVG element -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 100 120" class="image">
     <!-- ... -->
  </svg>
  <!-- Fallback image -->
  <img src="..." alt="..." loading="lazy" class="fallback-image" />
</figure>

Wir müssen auch einige Barrierefreiheitsprobleme für diesen Effekt angehen. Insbesondere müssen wir Verbesserungen für Benutzer vornehmen, die das Web lieber ohne Animationen durchsuchen, und für Benutzer, die das Web mit Bildschirmlesegeräten durchsuchen.

Die Zugänglichmachung von SVG-Elementen erfordert viel zusätzliches Markup. Wenn wir außerdem Übergänge entfernen möchten, müssten wir ziemlich viele CSS-Eigenschaften überschreiben, was zu Problemen führen kann, wenn unsere Selektor-Spezifität nicht konsistent ist. Glücklicherweise bietet unser neu hinzugefügtes reguläres Bild hervorragende Barrierefreiheitsfunktionen und kann leicht als Ersatz für Benutzer dienen, die das Web ohne Animationen durchsuchen.

<figure>
  <!-- Animated SVG element -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 100 120" class="image" aria-hidden="true">
    <!-- ... -->
  </svg>

  <!-- Fallback SEO & a11y image -->
  <img src="..." alt="..." loading="lazy" class="fallback-image" />
</figure>

Wir müssen das SVG-Element für assistierende Technologien ausblenden, indem wir aria-hidden="true" hinzufügen, und wir müssen unser CSS aktualisieren, um die prefers-reduced-motion-Media-Abfrage einzuschließen. Wir blenden das Fallback-Bild inklusiv aus für Benutzer ohne die Präferenz für reduzierte Bewegung und halten es gleichzeitig für assistierende Technologien wie Bildschirmlesegeräte verfügbar.

@media (prefers-reduced-motion: no-preference) {
.fallback-image {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
  } 
}

@media (prefers-reduced-motion) {
  .image {
    display: none;
  }
}

Hier ist das Ergebnis nach den Verbesserungen

Bitte beachten Sie, dass diese Verbesserungen nicht ändern, wie der Effekt für Benutzer aussieht und sich verhält, die die prefers-reduced-motion-Präferenz nicht gesetzt haben oder keine Bildschirmlesegeräte verwenden.

Das war's!

Entwickler waren begeistert von der path-Option für das clip-path CSS-Attribut und den neuen Styling-Möglichkeiten, aber viele waren enttäuscht festzustellen, dass diese Werte nur Pixelwerte unterstützen. Das bedeutet nicht nur, dass die Funktion nicht responsiv ist, sondern schränkt auch die Anzahl der Anwendungsfälle, in denen wir sie verwenden möchten, stark ein.

Wir haben einen interessanten Bild-Pop-Out-Hover-Effekt, der clip-path: path verwendet, in ein SVG-Element umgewandelt, das die Reaktionsfähigkeit des <clipPath>-SVG-Elements nutzt, um dasselbe zu erreichen. Dabei haben wir jedoch einige SEO- und Barrierefreiheitsprobleme eingeführt, die wir mit etwas zusätzlichem Markup und einem Fallback-Bild umgangen haben.

Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Artikel zu lesen! Lassen Sie mich wissen, ob dieser Ansatz Ihnen eine Idee gegeben hat, wie Sie Ihre eigenen Effekte implementieren können, und ob Sie Vorschläge haben, wie Sie diesen Effekt auf andere Weise angehen können.