Offset-ankkuri - CSS-temppuja

Anonim

offset-anchorOminaisuus määrittää pisteen laatikon sisällä se levitetään ankkuri, joka liikkuu pitkin offset-path.

Se on tavallaan sanallinen, joten hajotetaan se hieman.

Sinulla on elementti, sano laatikko:

Katso Geoff Grahamin (@geoffgraham) kynän oranssi laatikko CodePenistä.

Haluat, että laatikko liikkuu polkua pitkin, sanoen mutkikas viiva. Voimme tehdä tämän rivin SVG: n kanssa suoraan HTML: ssä ja käyttämällä sitä offset-pathlaatikkona. Luomme animaation hyödyntämällä offset-distanceomaisuutta:

Katso Geoff Graham (@geoffgraham) -kynän oranssi neliö polulla CodePenissä.

Hyvä hyvä. Mutta entä jos haluamme, että laatikko näyttää siltä, ​​että se riippuu linjasta? Tiedät, kuten henkilö, joka liukuu vetoketjua pitkin.

Sieltä offset-anchortulee! Se merkitsee pisteen elementille ja käyttää sitä elementin sijoittamiseen polulle.

Tässä on esimerkki, jossa kolme eri ruutua on kiinnitetty samalle polulle eri ankkuripisteissä:

Katso Geoff Graham (@geoffgraham) Pen NMbEpy -koodia CodePenistä.

Syntaksi

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

Arvot

  • auto: Ottaa arvon offset-positionniin kauan kuin kyseinen arvo ei myöskään ole autoja niin kauan kuin se offset-pathon asetettu arvoon none.
  • position
    • : Yksikkö, joka lasketaan sen astian suhteellisesta leveydestä ja korkeudesta, jossa se on. Esimerkiksi 50% 50%se olisi kuollut keskipiste. Huomaa, että avainsanat toimivat täällä, aivan kuten background-positionmissä center centerpalauttaa saman tuloksen.
    • : Yksikkö, joka siirtää ankkurin elementin laatikon vasemmassa yläkulmassa.

On syytä huomata, että positionse on animoitava ominaisuus.

Selaimen tuki

offset-*Ominaisuudet pidetään edelleen kokeellinen ominaisuus tätä kirjoitettaessa. Jos selaimen tuen nykyinen puute saa sinut epäröimään sen käyttämistä projektissa, sinun kannattaa harkita GSAP: n käyttöä tämän tason animaatiossa. Tämä tarjoaa sinulle laajimman selaintuen tällä hetkellä.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
46 72 Ei 79 Ei

Matkapuhelin / tabletti

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ei

Chrome 46: sta ja Opera 33: sta (ja niihin liittyvistä mobiiliversioista) lähtien meillä on "alkutuki" Blinkissä (ei lippua).

lisäinformaatio

  • Liikeradan moduulin tason 1 määrittely
  • WebKit-lippu # 139128
  • Mozilla-lippu # 1186329
  • Microsoft Edge -ominaisuuspyyntö