Escenas ancladas

Una escena de scroll anclada (o "sticky") es una sección alta con contenido que permanece fijo en pantalla mientras la sección pasa por detrás al hacer scroll — el clásico patrón de "historia impulsada por el scroll". Es la base sobre la que se construye casi cualquier receta de scroll avanzada de este sitio (ver Recetas avanzadas).

Hay dos cosas que forman una escena anclada: un par de ajustes de Fancy que activas en el panel ("I am parent container" y "Get parent", más abajo), y la propia estructura sticky — la sección alta y su escenario anclado —, que se construye con CSS normal (position: sticky, una altura), igual que la construirías sin el plugin. El CSS de esa parte se explica más abajo en esta página, para quien esté montando la estructura.

Míralo en acción: las plantillas Section card stack y Stacked cards.

I am parent / Get parent

Dentro de un escenario anclado, el elemento anclado en sí nunca se mueve — así que si intentara medir su propio progreso de scroll, ese progreso se congelaría en el momento en que quedara anclado. La solución es medir una caja distinta: toda la sección alta a su alrededor, que sigue moviéndose todo el tiempo.

Ajuste	Va en	Qué hace
I am parent container	La sección exterior y alta — la caja contra la que todos deberían medirse	La marca como referencia de medición
Get parent	Cada elemento animado dentro del escenario anclado	Mide contra el ancestro "I am parent" más cercano en lugar de contra sí mismo

Sin ningún ancestro "I am parent" por encima, "Get parent" recurre silenciosamente a medir el padre directo del elemento — que, dentro de un escenario anclado, también está atascado. Si las animaciones se congelan en el momento en que la escena queda anclada, casi siempre es por esto: comprueba que "I am parent" está en la sección exterior y que "Get parent" está en cada elemento animado dentro del escenario.

Estructura

section            "I am parent" · height: un múltiplo de 100vh · padding: 0 · overflow-x reseteado
└─ stage           position: sticky · top: 0 · al menos una pantalla de alto
   └─ content      "Get parent" + filas de activador de scroll

• La sección necesita su overflow horizontal reseteado (ver el problema de Safari más abajo) y su propio padding eliminado — el gutter lateral del contenido tiene que trasladarse al escenario (y a cualquier otro contenido de la sección que no sea el escenario), incluso en móviles.
• Un elemento sticky se mueve en relación con su propio padre, no con toda la sección — así que si el escenario está dentro de un contenedor extra más corto que la sección, se libera antes de lo que esperarías.

La ventana del anclaje

Una escena que mide k pantallas de alto (p. ej. 300vh = 3 pantallas) queda anclada desde el progreso de scroll 1/(k+1) hasta k/(k+1). Cada fila de animación dentro de la escena debería planearse para caer dentro de esa ventana:

Altura de la escena	Ventana anclada	Filas en la cuadrícula del 5%
200vh	33% – 67%	35 – 65
300vh	25% – 75%	25 – 75
400vh	20% – 80%	20 – 80
500vh	17% – 83%	20 – 80

Una fila que empieza antes de la ventana se reproduce mientras la escena todavía está entrando en su posición con scroll (bien para un efecto de parallax que llega); una que termina después se reproduce mientras el escenario se está liberando y ya se está deslizando fuera, lo que normalmente se ve como si hubiera terminado demasiado tarde.

Como la primera sección de una página (un hero), la escena ya está situada en su valor de inicio-anclaje en el momento en que carga la página — así que las filas dentro de la ventana empiezan en el primer scroll del visitante, igual que en cualquier otro sitio. Las filas situadas antes de ese valor se muestran como ya parcialmente reproducidas. Para tiempos que no caen en la cuadrícula del 5%, ver Matemática del scroll y CSS personalizado.

Mantén el texto del hero visible y estático

Si la escena anclada es el hero de tu página, mantén su titular y la primera línea de texto estáticos y visibles desde la carga en lugar de animarlos de entrada. Ese texto es muy probablemente el largest contentful paint de tu página — si empieza oculto (una entrada, o una fila Fade cuya ventana aún no ha empezado), retrasas el LCP y muestras una pantalla de aspecto vacío en una conexión lenta. Anima los elementos visuales del escenario en su lugar y deja que las palabras se queden quietas.

Una altura que sigue funcionando sin JavaScript

Una altura de escena fija (digamos, height: 400vh) puede cortar el contenido del escenario en pantallas cortas cuando no hay JavaScript en ejecución — en el lienzo de Bricks/Etch con la vista previa desactivada, digamos, o con JavaScript bloqueado. Haz que la propia altura dependa de que la animación exista, usando una fila Custom sin ventana en la sección:

%root% {
  --scene-h: calc(var(--fa-scroll--custom) * 0vh + 400vh);
  height: var(--scene-h, auto);
}

Sin el script de scroll, --fa-scroll--custom no existe, lo que hace que --scene-h sea inválida, lo que recurre a height: auto — así que el escenario simplemente no queda anclado y su contenido fluye con normalidad, sin que nada quede cortado.

Bricks

• Sección: "I am parent container" en el panel ScrollTrigger Animations, padding puesto a 0 en el control Spacing, y en su CSS personalizado: %root% { overflow-x: initial; }.
• Escenario: ya sea el CSS de arriba, o los controles nativos (Position: Sticky, Top: 0, Min height: 100vh, Overflow: hidden).
• Cada elemento animado dentro: "Get parent", más sus propias filas de ScrollTrigger con Start/End dentro de la ventana anclada.
• Nunca pongas un overlay con gradiente directamente en el escenario sticky en ningún breakpoint — Bricks entonces emite position: relative en ese mismo elemento, lo que anula el comportamiento sticky. Usa en su lugar un elemento "sombra" absoluto y separado.
• Recuerda: nada se anima en el lienzo hasta que el interruptor FA de la barra de herramientas está activado (está desactivado cada vez que reabres el builder).

Etch

• Sección: un elemento con padding: 0 y overflow-x: initial en su propia clase (una clase vence a los valores por defecto de Etch y a la propia regla base section del plugin).
• Escena: clases fa--iparent fa--custom, más su propia clase con el CSS de altura de arriba.
• Hijos animados: fa--parent más sus clases de fila, p. ej. fa--custom fa--custom--start-25 fa--custom--end-75.
• El lienzo de Etch ejecuta el script de scroll en vivo, así que la escena se anima mientras editas (a menos que hayas desactivado el interruptor de la barra de herramientas Fancy).

Problemas comunes

• El escenario salta o se entrecorta en Safari / en iPhone. El plugin pone overflow-x: clip en body y section, y Safari puede hacer que un hijo sticky salte cuando eso está activo. Resetea overflow-x: initial en cada sección que contenga un escenario sticky. Esto no se reproduce en pruebas automatizadas de Chromium — compruébalo en Safari real.
• Las animaciones se congelan en el momento en que el escenario queda anclado. Los elementos animados (o la propia sección) se están midiendo a sí mismos en lugar de a la sección. Añade "I am parent" a la sección y "Get parent" a cada elemento animado dentro.
• El contenido queda cortado en pantallas cortas, o en el builder. La escena tiene una altura fija y el escenario tiene un height: 100vh fijo en lugar de un min-height. Usa el patrón CSS de altura con respaldo de arriba, y min-height (no height) en el escenario.
• La escena se colapsa a una columna estrecha, o algo con container-type dentro de ella mide 0px. En Bricks, una sección es una columna flex centrada, así que un div simple dentro de ella se encoge al ancho de su contenido. Dale a la escena (y a cualquier contenedor entre la sección y el escenario) un width: 100% explícito.
• El texto toca el borde de la pantalla en móviles. El propio padding de la sección se eliminó para el escenario sticky, y nada recogió ese gutter en su lugar. Añade padding-inline (p. ej. clamp(1rem, 5vw, 2rem)) al escenario y a cualquier otro contenido directo de la sección, en cada breakpoint.
• Una animación se reproduce después de que el escenario ya se haya liberado, o termina visiblemente pronto. Su ventana cae fuera del tramo anclado para esa altura de escena — mueve la fila, o haz la escena más alta.
• Aparece una barra de scroll horizontal en la página. Algo dentro del escenario se está moviendo hacia los lados más allá de sus bordes — añade overflow: hidden al propio escenario.