Offset-ancoră - CSS-Tricks

Anonim

offset-anchorProprietatea definește un punct în caseta este aplicat ca ancora care se deplasează de-a lungul offset-path.

Este cam vorbitor, așa că hai să descompunem puțin.

Aveți un element, spuneți o casetă:

Vedeți Pen Orange Box de Geoff Graham (@geoffgraham) pe CodePen.

Vrei ca acea casetă să se deplaseze de-a lungul unei căi, să spunem o linie zgârcită. Putem crea acea linie cu SVG direct în HTML și folosindu-l ca offset-pathpe casetă. Creăm animația folosind offset-distanceproprietatea:

Vedeți Pen Orange Square on Path de Geoff Graham (@geoffgraham) pe CodePen.

Bine bine. Dar dacă vrem ca cutia să arate de parcă ar atârna de pe linie? Știi, ca o persoană care alunecă de-a lungul unei tirolii.

Acolo offset-anchorintra! Marcează un punct pe element și îl folosește pentru a poziționa elementul pe cale.

Iată un exemplu în care trei casete diferite sunt atașate la aceeași cale în diferite puncte de ancorare:

Vezi Pen NMbEpy de Geoff Graham (@geoffgraham) pe CodePen.

Sintaxă

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

Valori

  • auto: Ia valoarea offset-positionatâta timp cât acea valoare nu este autoși atât timp cât offset-patheste setată la none.
  • position
    • : O unitate calculată din lățimea și înălțimea relativă a containerului în care se află. De exemplu, 50% 50%ar fi punctul mort. Rețineți că cuvintele cheie funcționează aici, la fel ca în background-positioncazul în care center centerar rezulta același rezultat.
    • : O unitate care compensează ancora din colțul din stânga sus al casetei elementului.

Este demn de remarcat faptul că positioneste o proprietate animabilă.

Suport pentru browser

Cele offset-*Proprietățile sunt considerate în continuare o funcție experimentală , la momentul scrierii. Dacă lipsa actuală de suport pentru browser vă face să ezitați să îl utilizați într-un proiect, atunci vă recomandăm să utilizați GSAP pentru acest nivel de animație. Acest lucru vă va oferi cel mai larg suport de browser în acest moment.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
46 72 Nu 79 Nu

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 Nu

Începând cu Chrome 46 și Opera 33 (și versiunile mobile aferente), avem „suport inițial” în Blink (fără semnalizare).

informatii suplimentare

  • Specificația nivelului modulului de cale de mișcare
  • Bilet WebKit # 139128
  • Bilet Mozilla # 1186329
  • Cerere de caracteristică Microsoft Edge