Créons un effet d'échappement d'image avec SVG Clip Path

Il y a quelques semaines, je suis tombé sur cet effet pop-out cool par Mikael Ainalem. Il met en valeur le Path Clip: Path () dans CSS, qui vient de prendre un soutien approprié dans la plupart des navigateurs modernes. Je voulais y creuser moi-même pour avoir une meilleure idée de la façon dont cela fonctionne. Mais dans le processus, j'ai trouvé des problèmes avec Clip-Path: Path (); et finir par trouver une approche alternative que je voulais accompagner avec vous dans cet article.

Si vous n'avez pas utilisé Clip-Path ou si vous ne le savez pas, il nous permet essentiellement de spécifier une région d'affichage pour un élément basé sur un chemin de dérivation et de masquer les parties de l'élément qui tombent en dehors du chemin de clip.

Les valeurs possibles pour le chemin de clip comprennent le cercle, l'ellipse et le polygone qui limitent le cas d'utilisation à ces formes spécifiques. C'est là que la nouvelle valeur de chemin entre en jeu - elle nous permet d'utiliser un chemin SVG plus flexible pour créer divers chemins d'écrêtage qui vont au-delà des formes de base.

Prenons ce que nous savons sur Clip-Path et commençons à travailler sur l'effet de survol. L'idée de base de l'est de faire de l'image de premier plan d'une personne qui semble sortir de l'arrière-plan coloré et de mettre à l'échelle en taille lorsque l'élément est en plané. Un détail important est de savoir comment l'animation d'image du premier plan (évoluer et monter) semble être indépendante de l'animation d'image d'arrière-plan (mise à l'échelle uniquement).

Cet effet semble cool, mais il y a certains problèmes avec la valeur du chemin. Pour commencer, bien que nous ayons mentionné que le soutien est généralement bon, ce n'est pas génial et plane autour de 82% de couverture au moment de la rédaction. Alors, gardez à l'esprit que le support mobile est actuellement limité à Chrome et Safari.

Outre le soutien, le problème plus grand et plus bizarre avec PATH est qu'il ne fonctionne actuellement qu'avec les valeurs de pixels , ce qui signifie qu'il n'est pas réactif. Par exemple, disons que nous zoomer sur la page. Dès le départ, la forme du chemin commence à couper les choses.

Cela limite gravement le nombre de cas d'utilisation pour le chemin de clip: path (), car il ne peut être utilisé que sur des éléments de taille fixe. La conception Web réactive est une norme largement acceptée depuis de nombreuses années maintenant, il est donc bizarre de voir une nouvelle propriété CSS qui ne suit pas le principe et utilise exclusivement des unités de pixels.

Ce que nous allons faire, c'est recréer cet effet en utilisant des techniques CSS standard et largement soutenues afin que cela ne fonctionne pas seulement, mais qu'il soit également vraiment réactif.

La partie délicate

Nous voulons que tout ce qui déborde le chemin de clip n'est visible que sur la partie supérieure de l'image. Nous ne pouvons pas utiliser une propriété de débordement CSS standard car elle affecte à la fois le haut et le bas.

Alors, quelles sont nos options en plus du débordement et du chemin à clips? Eh bien, utilisons simplement dans le SVG lui-même. est une propriété SVG, qui est différente de celle de clip (Path.

Élément svg

Les éléments SVG et s'adaptent au système de coordonnées de l'élément SVG, ils sont donc réactifs hors de la boîte. Comme l'élément SVG est à l'échelle, son système de coordonnées est également à l'échelle et il maintient ses proportions en fonction des différentes propriétés qui couvrent une large gamme de cas d'utilisation possibles. En tant qu'avantage supplémentaire, l'utilisation de Clip Path dans CSS sur SVG a un support de navigateur à 95%, ce qui représente une augmentation de 13% par rapport à Clip Path: Path.

Commençons par configurer notre élément SVG. J'ai utilisé Inkscape pour créer le balisage SVG de base et les chemins de coupure, juste pour me faciliter la tâche. Une fois que j'ai fait cela, j'ai mis à jour le balisage en ajoutant mes propres attributs de classe.

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -10 100 120">
  <defs>
    <clippath clippathunits="userspaceonuse">
      <chemin d="..."></chemin>
    </clippath>
    <clippath clippathunits="userspaceonuse">
      <chemin d="..."></chemin>
    </clippath>
  
  <g clip-path="url (#maskimage)" transform="tradlate (0 -7)">
    
    <image clip-path="url (#maskbackground)" width="120" height="120" x="70" y="38" href="..." transform="tradlate (-90 -31)"></image>
    
    <image width="120" height="144" x="- 15" y="0" fill="non" href="..."></image>
  </g>
</defs></svg>

Ce balisage peut être facilement réutilisé pour d'autres images d'arrière-plan et de premier plan. Nous avons juste besoin de remplacer l'URL dans l'attribut HREF à l'intérieur des éléments d'image.

Maintenant, nous pouvons travailler sur l'animation de volante dans CSS. Nous pouvons nous débrouiller avec des transformations et des transitions, en nous assurant que le premier plan est bien centré, puis à la mise à l'échelle et à la déplacement des choses lorsque le plan de volants se déroule.

 .image {
  transformée: échelle (0,9, 0,9);
  Transition: transformer la facilité de 0,2 s;
}

.image__Foreground {
  Transform-Origin: 50% 50%;
  Transforme: Traductiony (4px) Échelle (1, 1);
  Transition: transformer la facilité de 0,2 s;
}

.image: Hover {
  transformée: échelle (1, 1);
}

.image: Hover .image__foreground {
  TRANSFORM: TRADRADEY (-7PX) Échelle (1.05, 1.05);
}

Voici le résultat du code HTML et CSS ci-dessus. Essayez de redimensionner l'écran et de modifier les dimensions de l'élément SVG pour voir comment l'effet évolue avec la taille de l'écran.

Cela a fière allure! Cependant, nous n'avons pas fini. Nous devons encore résoudre certains problèmes que nous obtenons maintenant que nous avons changé le balisage d'un élément d'image HTML à un élément SVG.

SEO et accessibilité

Les éléments SVG en ligne ne seront pas indexés par les robots de recherche. Si les éléments SVG sont une partie importante du contenu, votre SEO de page peut prendre un coup car ces images ne seront probablement pas ramassées.

Nous aurons besoin d'un balisage supplémentaire qui utilise un élément régulier qui est caché avec CSS. Les images déclarées de cette façon sont automatiquement ramassées par des robots et nous pouvons fournir des liens vers ces images dans un site de site d'image pour nous assurer que les Crawlers parviennent à les trouver. Nous utilisons Loading = "Lazy" qui permet au navigateur de décider si le chargement de l'image doit être différé.

Nous allons envelopper les deux éléments dans un élément

afin que nous le marquons reflète la relation entre ces deux images et les regroupe ensemble:

 <figure>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -10 100 120">
     
  </svg>
  
  <img src="..." alt="..." loading="Lazy">
 figure></figure>

Nous devons également répondre à certains problèmes d'accessibilité pour cet effet. Plus précisément, nous devons apporter des améliorations pour les utilisateurs qui préfèrent parcourir le Web sans animations et utilisateurs qui parcourent le Web à l'aide de lecteurs d'écran.

Rendre les éléments SVG accessibles demande beaucoup de balisage supplémentaire. De plus, si nous voulons supprimer les transitions, nous devions remplacer pas mal de propriétés CSS qui peuvent causer des problèmes si nos spécificités de sélecteur ne sont pas cohérentes. Heureusement, notre image régulière nouvellement ajoutée a une excellente fonctionnalité d'accessibilité cuite et peut facilement remplacer les utilisateurs qui parcourent le Web sans animations.

 <figure>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -10 100 120" aria-hidden="true">
    
  </svg>

  
  <img src="..." alt="..." loading="Lazy">
 figure></figure>

Nous devons masquer l'élément SVG à des appareils d'assistance, en ajoutant Aria-Hidden = "True", et nous devons mettre à jour notre CSS pour inclure la requête multimédia préfère réduite en mouvement. Nous cachons inclusivement l'image de secours pour les utilisateurs sans la préférence de mouvement réduite en attendant de la garder disponible pour des appareils d'assistance comme les lecteurs d'écran.

 @Media (préfert-réduction du mouvement: sans préférence) {
.fallback-iMage {
  Clip: rect (0 0 0 0); 
  Path de clip: encadré (50%);
  hauteur: 1px;
  débordement: caché;
  Position: absolue;
  Espace blanc: Nowrap; 
  Largeur: 1px;
  } 
}

@Media (préfère-réduction du mouvement) {
  .image {
    Affichage: aucun;
  }
}

Voici le résultat après les améliorations:

Veuillez noter que ces améliorations ne modifieront pas à quoi l'effet ressemble et se comporte pour les utilisateurs qui n'ont pas l'ensemble de préférences en mouvement de mouvement préfabriqué ou qui n'utilisent pas les lecteurs d'écran.

C'est un enveloppe

Les développeurs étaient enthousiasmés par l'option Path pour l'attribut CSS CLIP-Path et les nouvelles possibilités de style, mais beaucoup étaient mécontents de découvrir que ces valeurs ne prennent que les valeurs de pixels. Non seulement cela signifie que la fonctionnalité n'est pas réactive, mais elle limite gravement le nombre de cas d'utilisation où nous voudrions l'utiliser.

Nous avons converti un effet de survol de l'image intéressant qui utilise le chemin de clip: chemin vers un élément SVG qui utilise la réactivité de l'élément SVG pour obtenir la même chose. Mais ce faisant, nous avons introduit des problèmes de référencement et d'accessibilité, que nous avons réussi à contourner un peu de balisage supplémentaire et une image de secours.

Merci d'avoir pris le temps de lire cet article! Faites-moi savoir si cette approche vous a donné une idée de la façon de mettre en œuvre vos propres effets et si vous avez des suggestions sur la façon d'aborder cet effet d'une manière différente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!