Ofsetová kotva - Triky CSS

Anonim

offset-anchorVlastnosť definuje bod v poli sa aplikuje ako kotva, ktorá sa pohybuje pozdĺž offset-path.

To je trochu nepríjemné, tak to poďme trochu rozobrať.

Máte prvok, povedzme rámček:

Pozrite si Pen Orange Box od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Chcete, aby sa toto políčko pohybovalo po ceste, povedzme krivolakou čiarou. Tento riadok môžeme vytvoriť pomocou SVG priamo v HTML a použiť ho ako offset-pathpre pole. Animáciu vytvoríme pomocou offset-distancevlastnosti:

Prezrite si námestie Pen Orange Square na ceste od Geoffa Grahama (@geoffgraham) na serveri CodePen.

Dobre dobre. Čo však v prípade, ak chceme, aby krabica vyzerala, že visí z radu? Viete, ako človek kĺzajúci sa po šnúre na zips.

To je miesto, kde offset-anchorprichádza! Označí bod na prvku a pomocou neho umiestni prvok na cestu.

Tu je príklad, keď sú k jednej ceste v rôznych bodoch ukotvenia pripevnené tri rôzne políčka:

Pozrite si pero NMbEpy od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Syntax

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

Hodnoty

  • auto: Berie hodnotu offset-positiondovtedy, kým táto hodnota nie je tiež autoa pokiaľ offset-pathje nastavená na none.
  • position
    • : Jednotka, ktorá sa počíta z relatívnej šírky a výšky kontajnera, v ktorom sa nachádza. Napríklad 50% 50%by bol mŕtvy bod. Upozorňujeme, že kľúčové slová tu fungujú, rovnako ako background-positionkde center centerby sa vrátil rovnaký výsledok.
    • : Jednotka, ktorá vyrovnáva kotvu z ľavého horného rohu skrinky prvku.

Stojí za zmienku, že positionide o animovateľnú vlastnosť.

Podpora prehľadávača

Tieto offset-*vlastnosti sú stále považované za experimentálne funkcie v čase písania tohto článku. Ak súčasná nedostatočná podpora prehľadávačov váha s jej použitím v projekte, možno budete chcieť zvážiť použitie GSAP pre túto úroveň animácie. Takto získate najširšiu podporu prehľadávača v súčasnosti.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
46 72 Nie 79 Nie

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nie

Od prehliadačov Chrome 46 a Opera 33 (a súvisiacich mobilných verzií) máme v aplikácii Blink „počiatočnú podporu“ (bez príznaku).

Ďalšie informácie

  • Špecifikácia modulu pohybovej cesty úrovne 1
  • WebKit lístok # 139128
  • Vstupenka Mozilla # 1186329
  • Žiadosť o funkciu Microsoft Edge