Kompensacinis inkaras - CSS-gudrybės

Anonim

offset-anchorNuosavybė apibrėžia tašką per langelį ji taikoma kaip inkaras, kad juda išilgai offset-path.

Tai šiek tiek žodinga, todėl šiek tiek suskaidykime.

Turite elementą, sakykite langelį:

Žr. Geoffo Grahamo (@geoffgraham) „Pen Orange“ dėžutę „CodePen“.

Norite, kad ši dėžutė judėtų keliu, tarkim, vingiuota linija. Mes galime padaryti tą eilutę su SVG tiesiai HTML ir naudodami ją kaip offset-pathlaukelį. Animaciją kuriame naudodamiesi offset-distancenuosavybe:

Peržiūrėkite Geoffo Grahamo (@geoffgraham) „Pen Orange“ aikštę kelyje „CodePen“.

Gerai Gerai. Bet ką daryti, jei norime, kad dėžutė atrodytų tarsi pakibusi nuo linijos? Žinote, kaip žmogus, slystantis išilgai užtrauktuko.

Štai kur offset-anchorateina! Jis žymi elemento vietą ir naudoja ją elemento padėčiai kelyje.

Štai pavyzdys, kai trys skirtingi langeliai yra pritvirtinti prie to paties kelio skirtinguose tvirtinimo taškuose:

„CodePen“ ieškokite Geoffo Grahamo (@geoffgraham) „Pen NMbEpy“.

Sintaksė

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

Vertybės

  • auto: Vertę vertina offset-positiontol, kol ta vertė taip pat nėra autoir tol, kol offset-pathnustatyta none.
  • position
    • : Vienetas, kuris apskaičiuojamas pagal santykinį konteinerio, kuriame jis yra, plotį ir aukštį. Pavyzdžiui, 50% 50%būtų aklavietė. Atminkite, kad raktiniai žodžiai veikia čia, lygiai taip pat, background-positionkur center centerbūtų gautas tas pats rezultatas.
    • : Vienetas, nukreipiantis inkarą iš viršutinio kairiojo elemento langelio kampo.

Verta paminėti, kad positiontai yra animacinis turtas.

Naršyklės palaikymas

Į offset-*savybės yra vis dar laikomi eksperimentinė funkcija tuo metu šio raštu. Jei šiuo metu trūksta naršyklės palaikymo, jūs nesiryžtate jo naudoti projekte, galite apsvarstyti galimybę naudoti GSAP tokio lygio animacijai. Tai suteiks jums plačiausią naršyklės palaikymą šiuo metu.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
46 72 Ne 79 Ne

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 Ne

Nuo „Chrome 46“ ir „Opera 33“ (ir susijusių mobiliųjų versijų) „Blink“ (be vėliavos) turime „pradinį palaikymą“.

Papildoma informacija

  • Judėjimo kelio modulio 1 lygio specifikacija
  • „WebKit“ bilietas # 139128
  • „Mozilla“ bilietas # 1186329
  • „Microsoft Edge“ funkcijos užklausa