Âncora de deslocamento - CSS-Tricks

Anonim

A offset-anchorpropriedade define um ponto dentro da caixa ao qual é aplicado como a âncora que se move ao longo do offset-path.

Isso é meio prolixo, então vamos decompô-lo um pouco.

Você tem um elemento, digamos uma caixa:

Veja a Pen Orange Box de Geoff Graham (@geoffgraham) na CodePen.

Você quer que a caixa se mova ao longo de um caminho, digamos, uma linha irregular. Podemos fazer essa linha com SVG diretamente no HTML e usá-la como offset-patha caixa para. Criamos a animação usando a offset-distancepropriedade:

Veja o Pen Orange Square on Path de Geoff Graham (@geoffgraham) no CodePen.

Bom Bom. Mas e se quisermos que a caixa pareça que está pendurada na linha? Você sabe, como uma pessoa deslizando ao longo de uma tirolesa.

É aí que offset-anchorentra! Ele marca um ponto no elemento e usa isso para posicionar o elemento no caminho.

Aqui está um exemplo em que três caixas diferentes são anexadas ao mesmo caminho em diferentes pontos de ancoragem:

Veja a Pen NMbEpy de Geoff Graham (@geoffgraham) no CodePen.

Sintaxe

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

Valores

  • auto: Assume valor offset-positiondesde que esse valor não seja também autoe desde que offset-pathesteja definido como none.
  • position
    • : Uma unidade calculada a partir da largura e altura relativas do contêiner em que se encontra. Por exemplo, 50% 50%seria o ponto morto. Observe que as palavras-chave funcionam aqui, da mesma forma que background-positiononde center centerretornaria o mesmo resultado.
    • : Uma unidade que desloca a âncora do canto superior esquerdo da caixa do elemento.

É importante notar que positioné uma propriedade animável.

Suporte para navegador

As offset-*propriedades ainda são consideradas um recurso experimental no momento da redação deste artigo. Se a atual falta de suporte ao navegador o deixa hesitante em usá-lo em um projeto, você pode considerar o uso de GSAP para este nível de animação. Isso oferecerá a você o suporte de navegador mais amplo no momento.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
46 72 Não 79 Não

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Não

A partir do Chrome 46 e Opera 33 (e as versões móveis relacionadas), temos “suporte inicial” no Blink (sem bandeira).

Informações adicionais

  • Especificação de nível 1 do módulo de caminho de movimento
  • WebKit Ticket # 139128
  • Mozilla Ticket # 1186329
  • Solicitação de recurso do Microsoft Edge