Offset-kotva - Triky CSS

Anonim

offset-anchorVlastnost definuje bod v poli se aplikuje jako kotva, která se pohybuje podél offset-path.

To je trochu rozvláčné, tak to pojďme trochu rozebrat.

Máte prvek, řekněme rámeček:

Podívejte se na Pen Orange Box od Geoffa Grahama (@geoffgraham) na CodePen.

Chcete, aby se toto pole pohybovalo po cestě, řekněme klikatou čarou. Můžeme vytvořit tento řádek s SVG přímo v HTML a použít jej jako offset-pathpro pole. Animaci vytváříme pomocí offset-distancevlastnosti:

Podívejte se na Pen Orange Square on Path od Geoffa Grahama (@geoffgraham) na CodePen.

Dobře dobře. Ale co když chceme, aby box vypadal, jako by visel z řady? Víte, jako člověk, který klouže po linii zipu.

To je místo, kde offset-anchorpřichází! Označí místo na prvku a použije jej k umístění prvku na cestě.

Zde je příklad, kdy jsou ke stejné cestě v různých kotevních bodech připojeny tři různé rámečky:

Podívejte se na Pen NMbEpy od Geoffa Grahama (@geoffgraham) na CodePen.

Syntax

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

Hodnoty

  • auto: Bere hodnotu offset-positiontak dlouho, dokud tato hodnota není také autoa pokud offset-pathje nastavena na none.
  • position
    • : Jednotka, která se počítá z relativní šířky a výšky kontejneru, ve kterém se nachází. Například 50% 50%by byla úvratí. Všimněte si, že klíčová slova fungují zde, stejně jako background-positionkde center centerby vrátil stejný výsledek.
    • : Jednotka, která kompenzuje kotvu z levého horního rohu pole prvku.

Stojí za zmínku, že positionjde o animovatelnou vlastnost.

Podpora prohlížeče

Tyto offset-*vlastnosti jsou stále považovány za experimentální funkce v době psaní tohoto článku. Pokud vás současná absence podpory prohlížečů váhá s jejím použitím na projektu, možná budete chtít zvážit použití GSAP pro tuto úroveň animace. To vám v tuto chvíli nabídne nejširší podporu prohlížeče.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
46 72 Ne 79 Ne

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ne

Od Chrome 46 a Opera 33 (a souvisejících mobilních verzí) máme v Blink „počáteční podporu“ (bez příznaku).

dodatečné informace

  • Specifikace modulu pohybové cesty úrovně 1
  • WebKit Ticket # 139128
  • Vstupenka na Mozillu # 1186329
  • Požadavek na funkci Microsoft Edge