Nobīdes enkurs - CSS-triki

Anonim

offset-anchorĪpašums definē punktu robežās kastē tas ir piemērots kā enkurs, kas pārvietojas gar offset-path.

Tas ir kaut kas izteiksmīgs, tāpēc nedaudz to sadalīsim.

Jums ir elements, teiksim lodziņu:

Skatiet Geoff Graham (@geoffgraham) Pen Orange Box ar CodePen.

Jūs vēlaties, lai šī lodziņš pārvietotos pa ceļu, teiksim izliektu līniju. Mēs varam izveidot šo rindu ar SVG tieši HTML un izmantojot to kā offset-pathlodziņu. Mēs izveidojam animāciju, izmantojot offset-distanceīpašumu:

Skatiet Geoff Graham (@geoffgraham) Pen Orange laukumu uz ceļa CodePen.

Labi labi. Bet ko tad, ja mēs vēlamies, lai kastīte izskatās tā, ka tā karājas pie līnijas? Jūs zināt, tāpat kā cilvēks, kurš slīd pa rāvējslēdzēja līniju.

Tur offset-anchorienāk! Tas iezīmē elementa vietu un izmanto to elementa novietošanai uz ceļa.

Šeit ir piemērs, kur trīs dažādas rūtiņas ir piestiprinātas pie viena ceļa dažādos enkurpunktos:

Skatiet Geoff Graham (@geoffgraham) Pen NMbEpy vietnē CodePen.

Sintakse

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

Vērtības

  • auto: Ņem vērtību offset-positiontik ilgi, kamēr šī vērtība arī nav autoun kamēr tā offset-pathir iestatīta uz none.
  • position
    • : Mērvienība, kas tiek aprēķināta pēc relatīvā konteinera platuma un augstuma, kurā tas atrodas. Piemēram, 50% 50%būtu miris punkts. Ņemiet vērā, ka atslēgvārdi šeit darbojas tāpat kā background-positiontur, kur center centertiktu iegūts tāds pats rezultāts.
    • : Vienība, kas atsver enkuru no elementa lodziņa augšējā kreisā stūra.

Ir vērts atzīmēt, ka positiontas ir animējams īpašums.

Pārlūka atbalsts

Šīs offset-*rakstīšanas laikā īpašības joprojām tiek uzskatītas par eksperimentālu iezīmi. Ja pašreizējais pārlūka atbalsta trūkums liek jums vilcināties ar tā izmantošanu projektā, ieteicams apsvērt iespēju izmantot GSAP šim animācijas līmenim. Tas jums šobrīd piedāvās visplašāko pārlūka atbalstu.

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
46 72 Nē 79 Nē

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. Nē

Sākot ar pārlūku Chrome 46 un Opera 33 (un ar to saistīto mobilo versiju), mums ir “sākotnējais atbalsts” Blink (bez karodziņa).

Papildus informācija

  • Kustības ceļa moduļa 1. līmeņa specifikācija
  • WebKit biļete # 139128
  • Mozilla biļete # 1186329
  • Microsoft Edge funkcijas pieprasījums