Desplazamiento-ancla - Trucos CSS

Anonim

La offset-anchorpropiedad define un punto dentro del cuadro que se aplica como el ancla que se mueve a lo largo del offset-path.

Eso es un poco prolijo, así que analicemos un poco eso.

Tienes un elemento, digamos una caja:

Vea el Pen Orange Box de Geoff Graham (@geoffgraham) en CodePen.

Quieres que esa caja se mueva a lo largo de un camino, digamos una línea ondulada. Podemos hacer esa línea con SVG directamente en el HTML y usarla como offset-pathpara el cuadro. Creamos la animación haciendo uso de la offset-distancepropiedad:

Vea el Pen Orange Square en Path de Geoff Graham (@geoffgraham) en CodePen.

Bien bien. Pero, ¿y si queremos que parezca que la caja está colgando de la línea? Ya sabes, como una persona deslizándose por una tirolesa.

¡Ahí es donde offset-anchorentra en juego! Marca un punto en el elemento y lo usa para colocar el elemento en la ruta.

A continuación, se muestra un ejemplo en el que se adjuntan tres cajas diferentes a la misma ruta en diferentes puntos de anclaje:

Vea Pen NMbEpy de Geoff Graham (@geoffgraham) en CodePen.

Sintaxis

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

Valores

  • auto: Toma el valor de offset-positionsiempre que ese valor no lo sea también autoy mientras offset-pathesté establecido en none.
  • position
    • : Una unidad que se calcula a partir del ancho y alto relativos del contenedor en el que se encuentra. Por ejemplo, 50% 50%sería el punto muerto. Tenga en cuenta que las palabras clave funcionan aquí, al igual que background-positionwhere center centerdevolvería el mismo resultado.
    • : Una unidad que desplaza el ancla de la esquina superior izquierda de la caja del elemento.

Vale la pena señalar que positiones una propiedad animable.

Soporte del navegador

Las offset-*propiedades todavía se consideran una característica experimental en el momento de escribir este artículo. Si la falta actual de compatibilidad con el navegador hace que no se atreva a usarlo en un proyecto, es posible que desee considerar el uso de GSAP para este nivel de animación. Esto le ofrecerá la más amplia compatibilidad con navegadores en este momento.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
46 72 No 79 No

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 No

A partir de Chrome 46 y Opera 33 (y las versiones móviles relacionadas) tenemos "soporte inicial" en Blink (sin bandera).

información adicional

  • Especificación de nivel 1 del módulo Motion Path
  • Boleto de WebKit # 139128
  • Boleto de Mozilla # 1186329
  • Solicitud de función de Microsoft Edge