Offset-anchor - Astuces CSS

Anonim

La offset-anchorpropriété définit un point dans la boîte, elle est appliquée en tant qu'ancre qui se déplace le long du offset-path.

C'est un peu verbeux, alors décomposons cela un peu.

Vous avez un élément, dites une boîte:

Voir la Pen Orange Box de Geoff Graham (@geoffgraham) sur CodePen.

Vous voulez que cette boîte se déplace le long d'un chemin, disons une ligne ondulée. Nous pouvons créer cette ligne avec SVG directement dans le HTML et l'utiliser comme offset-pathpour la boîte. Nous créons l'animation en utilisant la offset-distancepropriété:

Voir le Pen Orange Square sur Path par Geoff Graham (@geoffgraham) sur CodePen.

Bien bien. Mais que se passe-t-il si nous voulons que la boîte semble suspendue à la ligne? Vous savez, comme une personne qui glisse le long d'une tyrolienne.

C'est là offset-anchorqu'intervient! Il marque un endroit sur l'élément et l'utilise pour positionner l'élément sur le chemin.

Voici un exemple où trois boîtes différentes sont attachées au même chemin à différents points d'ancrage:

Voir le Pen NMbEpy de Geoff Graham (@geoffgraham) sur CodePen.

Syntaxe

.box ( offset-anchor: (auto | ); )

Valeurs

  • auto: Prend la valeur offset-positiontant que cette valeur n'est pas également autoet aussi longtemps que offset-pathest défini sur none.
  • position
    • : Unité calculée à partir de la largeur et de la hauteur relatives du conteneur dans lequel il se trouve. Par exemple, 50% 50%serait le point mort. Notez que les mots clés fonctionnent ici, tout comme background-positionoù center centerrenverrait le même résultat.
    • : Une unité qui décale l'ancre du coin supérieur gauche de la boîte de l'élément.

Il convient de noter qu'il positions'agit d'une propriété animable.

Prise en charge du navigateur

Les offset-*propriétés sont toujours considérées comme une caractéristique expérimentale au moment de la rédaction de cet article. Si le manque actuel de prise en charge du navigateur vous fait hésiter à l'utiliser sur un projet, vous pouvez envisager d'utiliser GSAP pour ce niveau d'animation. Cela vous offrira le support de navigateur le plus large pour le moment.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
46 72 Non 79 Non

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 Non

Depuis Chrome 46 et Opera 33 (et les versions mobiles associées), nous avons un «support initial» dans Blink (pas d'indicateur).

Information additionnelle

  • Spécifications du module de trajectoire de mouvement niveau 1
  • Billet WebKit # 139128
  • Billet Mozilla # 1186329
  • Demande de fonctionnalité Microsoft Edge