Offset-anker - CSS-trucs

Anonim

De offset-anchoreigenschap definieert een punt in het kader waarop het wordt toegepast als het anker dat langs het offset-path.

Dat is nogal omslachtig, dus laten we dat een beetje opsplitsen.

Je hebt een element, zeg maar een doos:

Zie de Pen Orange Box van Geoff Graham (@geoffgraham) op CodePen.

Je wilt dat die doos langs een pad beweegt, zeg maar een kronkelige lijn. We kunnen die regel met SVG rechtstreeks in de HTML maken en deze als offset-pathvoor de box gebruiken. Wij maken de animatie door gebruik te maken van de offset-distancewoning:

Zie het Pen Orange Square on Path door Geoff Graham (@geoffgraham) op CodePen.

Goed Goed. Maar wat als we willen dat de doos eruitziet alsof hij van de lijn hangt? Je weet wel, als een persoon die langs een kabelbaan glijdt.

Dat is waar offset-anchorkomt binnen! Het markeert een plek op het element en gebruikt die om het element op het pad te positioneren.

Hier is een voorbeeld waarbij drie verschillende dozen op verschillende ankerpunten aan hetzelfde pad zijn bevestigd:

Zie de Pen NMbEpy door Geoff Graham (@geoffgraham) op CodePen.

Syntaxis

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

Waarden

  • auto​offset-positionautooffset-pathnone
  • position
    • : Een eenheid die wordt berekend op basis van de relatieve breedte en hoogte van de container waarin deze zich bevindt. Dit 50% 50%zou bijvoorbeeld het dode punt zijn. Houd er rekening mee dat zoekwoorden hier werken, net zoals background-positionwaar center centerhetzelfde resultaat zou retourneren.
    • : Een eenheid die het anker verplaatst vanuit de linkerbovenhoek van de elementdoos.

Het is vermeldenswaard dat het positioneen eigenschap is die kan worden geanimeerd.

Browser-ondersteuning

De offset-*eigenschappen worden op het moment van schrijven nog steeds als een experimenteel kenmerk beschouwd. Als het huidige gebrek aan browserondersteuning u aarzelt om het in een project te gebruiken, dan kunt u overwegen om GSAP te gebruiken voor dit animatieniveau. Dit biedt u momenteel de breedste browserondersteuning.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
46 72 Nee 79 Nee

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nee

Vanaf Chrome 46 en Opera 33 (en de gerelateerde mobiele versies) hebben we "initiële ondersteuning" in Blink (geen vlag).

Extra informatie

  • Motion Path Module Level 1 Specificatie
  • WebKit-ticket # 139128
  • Mozilla-ticket # 1186329
  • Microsoft Edge-functieverzoek