Offset-anchor - Trucchi CSS

Anonim

La offset-anchorproprietà definisce un punto all'interno del box a cui viene applicata come l'ancora che si sposta lungo il offset-path.

È un po 'prolisso, quindi analizziamolo un po'.

Hai un elemento, ad esempio una scatola:

Guarda la Pen Orange Box di Geoff Graham (@geoffgraham) su CodePen.

Vuoi che quella scatola si muova lungo un percorso, ad esempio una linea ondulata. Possiamo creare quella linea con SVG direttamente nell'HTML e usarla come offset-pathper la casella. Creiamo l'animazione avvalendoci della offset-distanceproprietà:

Guarda il Pen Orange Square on Path di Geoff Graham (@geoffgraham) su CodePen.

Bene bene. Ma cosa succede se vogliamo che la scatola appaia fuori linea? Sai, come una persona che scivola lungo una teleferica.

Ecco dove offset-anchorentra in gioco! Segna un punto sull'elemento e lo utilizza per posizionare l'elemento sul percorso.

Ecco un esempio in cui tre diverse caselle sono collegate allo stesso percorso in diversi punti di ancoraggio:

Guarda la penna NMbEpy di Geoff Graham (@geoffgraham) su CodePen.

Sintassi

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

Valori

  • auto: Assume valore offset-positionfintanto che tale valore non è anche autoe fintanto che offset-pathè impostato su none.
  • position
    • : Un'unità calcolata dalla larghezza e dall'altezza relative del contenitore in cui si trova. Ad esempio, 50% 50%sarebbe il punto morto. Tieni presente che le parole chiave funzionano qui, proprio come background-positiondove center centerrestituirebbero lo stesso risultato.
    • : Un'unità che sposta l'ancora dall'angolo superiore sinistro del riquadro dell'elemento.

Vale la pena notare che positionè una proprietà animabile.

Supporto browser

Le offset-*proprietà sono ancora considerate una caratteristica sperimentale al momento della stesura di questo documento. Se l'attuale mancanza di supporto del browser ti rende esitante a usarlo su un progetto, potresti prendere in considerazione l'utilizzo di GSAP per questo livello di animazione. Questo ti offrirà il più ampio supporto del browser al momento.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
46 72 No 79 No

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 No

A partire da Chrome 46 e Opera 33 (e le relative versioni mobile) abbiamo il "supporto iniziale" in Blink (senza flag).

Informazioni aggiuntive

  • Specifica di livello 1 del modulo del percorso di movimento
  • Biglietto WebKit # 139128
  • Biglietto Mozilla # 1186329
  • Richiesta di funzionalità Microsoft Edge