Pomak-sidro - CSS-trikovi

Anonim

offset-anchorVlasništvo definira točku unutar okvira koji se primjenjuje kao sidro koje pomiče uzduž offset-path.

To je nekako rječito, pa hajde da to malo razbijemo.

Imate element, recimo okvir:

Pogledajte narančastu kutiju olovke Geoff Graham (@geoffgraham) na CodePenu.

Želite da se taj okvir kreće stazom, recimo vrckavom crtom. Tu liniju možemo napraviti sa SVG-om izravno u HTML-u i koristiti je kao offset-pathokvir. Animaciju stvaramo korištenjem offset-distancesvojstva:

Pogledajte Pen Pen Orange Square na Pathu Geoff Graham (@geoffgraham) na CodePenu.

Dobro Dobro. Ali što ako želimo da kutija izgleda kao da visi s linije? Znate, poput osobe koja klizi po zip liniji.

Tu offset-anchordolazi! Označava mjesto na elementu i koristi ga za pozicioniranje elementa na putanju.

Evo primjera gdje su tri različita okvira pričvršćena na isti put u različitim sidrištima:

Pogledajte Pen NMbEpy Geoff Graham (@geoffgraham) na CodePenu.

Sintaksa

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

Vrijednosti

  • auto: Uzima vrijednost offset-positionsve dok ta vrijednost nije također autoi dok offset-pathje postavljena na none.
  • position
    • : Jedinica koja se izračunava iz relativne širine i visine spremnika u kojem se nalazi. Na primjer, 50% 50%bila bi mrtva točka. Imajte na umu da ključne riječi ovdje rade, baš kao i background-positiongdje center centerbi vratile isti rezultat.
    • : Jedinica koja odmiče sidro od gornjeg lijevog kuta kutije elementa.

Vrijedno je napomenuti da positionje to animirano svojstvo.

Podrška preglednika

Na offset-*svojstva i dalje smatra eksperimentalna značajka u vrijeme pisanja ovog teksta. Ako vas trenutni nedostatak podrške preglednika oklijeva koristiti je na projektu, možda biste trebali razmisliti o upotrebi GSAP-a za ovu razinu animacije. Ovo će vam ponuditi trenutno najširu podršku za preglednike.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
46 72 Ne 79 Ne

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ne

Od Chromea 46 i Opera 33 (i srodnih mobilnih verzija) imamo „početnu podršku“ u Blink-u (bez zastavice).

dodatne informacije

  • Specifikacija modula putne putanje 1
  • WebKit ulaznica # 139128
  • Ulaznica za Mozilla # 1186329
  • Zahtjev za značajku Microsoft Edge