Nihkeankur - CSS-trikid

Anonim

offset-anchorVara määratleb punkt sees kasti rakendatakse selle ankur, mis liigub mööda offset-path.

See on üsna sõnakas, nii et jagagem seda natuke.

Teil on element, öelge kasti:

Vaadake CodePenil Geoff Grahami (@geoffgraham) pliiatsi apelsini kasti.

Sa tahad, et see kast liiguks mööda rada, ütleme kõverat joont. Saame selle rea teha SVG-ga otse HTML-is ja kasutades seda offset-pathkasti jaoks. Animatsiooni loome offset-distancevara kasutades:

Vaadake CodePenil Geoff Grahami (@geoffgraham) Peni oranži väljakut rajal.

Hea hea. Aga mis siis, kui me tahame, et karp näeks välja nagu see ripuks joonelt maha? Teate, nagu inimene libiseb mööda tõmblukku.

Seal offset-anchortuleb sisse! See tähistab elemendil kohta ja kasutab seda elemendi rajale paigutamiseks.

Siin on näide, kus kolm erinevat kasti on kinnitatud samale teele erinevates kinnituspunktides:

Vaadake CodePenilt Geoff Graham (@geoffgraham) Pen NMbEpy.

Süntaks

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

Väärtused

  • auto: Võtab väärtuse offset-positionseni, kuni see väärtus pole samuti autoja seni, kuni see offset-pathon seatud väärtusele none.
  • position
    • : Ühik, mis arvutatakse konteineri suhtelise laiuse ja kõrguse järgi, milles see on. Näiteks 50% 50%oleks see surnud punkt. Pange tähele, et märksõnad töötavad siin täpselt samamoodi nagu see, background-positionkus center centertagastataks sama tulemus.
    • : Üksus, mis kompenseerib ankru elemendi kasti vasakus ülanurgas.

Väärib märkimist, et positionsee on animeeritav vara.

Brauseri tugi

offset-*Omadused loetakse endiselt katsefunktsioon ajal seda kirjalikult. Kui praegune brauseritoe puudumine sunnib teid selle kasutamisel projektis kõhklema, võiksite kaaluda GSAP-i kasutamist selle animatsiooni taseme jaoks. See pakub teile praegu kõige laiemat brauserituge.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
46 72 Ei 79 Ei

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 85 81 Ei

Alates Chrome 46 ja Opera 33 (ja sellega seotud mobiiliversioonidest) on meil Blinkis (esialgne tugi) (lipp puudub).

Lisainformatsioon

  • Liikumistee mooduli 1. taseme spetsifikatsioon
  • WebKiti pilet # 139128
  • Mozilla pilet # 1186329
  • Microsoft Edge'i funktsiooni taotlus