Offset-anchor - CSS-triks

Anonim

Den offset-anchoregenskap definerer et punkt inne i boksen den kommer til ankeret som beveger seg langs den offset-path.

Det er ganske ordlyst, så la oss bryte det litt ned.

Du har et element, si en boks:

Se Pen Orange Box av Geoff Graham (@geoffgraham) på CodePen.

Du vil at boksen skal bevege seg langs en sti, sier en kvisende linje. Vi kan lage den linjen med SVG direkte i HTML-en og bruke den som offset-pathfor boksen. Vi lager animasjonen ved å bruke offset-distanceeiendommen:

Se Pen Orange Square on Path av Geoff Graham (@geoffgraham) på CodePen.

Bra bra. Men hva om vi vil at boksen skal se ut som den henger utenfor linjen? Du vet, som en person som glir langs en glidelås.

Det er der offset-anchorkommer inn! Det markerer et sted på elementet og bruker det til å plassere elementet på stien.

Her er et eksempel der tre forskjellige bokser er festet til samme bane på forskjellige ankerpunkter:

Se Pen NMbEpy av Geoff Graham (@geoffgraham) på CodePen.

Syntaks

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

Verdier

  • auto: Tar verdien offset-positionså lenge den verdien ikke er autoog så lenge den offset-pather satt til none.
  • position
    • : En enhet som beregnes ut fra den relative bredden og høyden på containeren den er i. For eksempel 50% 50%ville være dødpunkt. Vær oppmerksom på at nøkkelord fungerer her, akkurat som background-positionhvor center centergir samme resultat.
    • : En enhet som forskyver ankeret fra øvre venstre hjørne av elementets boks.

Det er verdt å merke seg at det positioner en animasjonsegenskap.

Nettleserstøtte

De offset-*egenskapene er fortsatt betraktet som en eksperimentell funksjon på tidspunktet for dette skriftlig. Hvis den nåværende mangelen på nettleserstøtte gjør deg nølende med å bruke den på et prosjekt, vil du kanskje vurdere å bruke GSAP til dette animasjonsnivået. Dette gir deg den bredeste nettleserstøtten for øyeblikket.

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
46 72 Nei 79 Nei

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nei

Fra og med Chrome 46 og Opera 33 (og relaterte mobilversjoner) har vi "første støtte" i Blink (uten flagg).

Tilleggsinformasjon

  • Bevegelsesmodul Nivå 1 Spesifikasjon
  • WebKit-billett # 139128
  • Mozilla-billett # 1186329
  • Microsoft Edge-funksjonsforespørsel