Un escenario que se revela al hacer scroll
La versión más simple del efecto «se queda fijo mientras el contenido cambia debajo» — una sección corta que fija un título en su sitio mientras una pequeña lista de destacados de función aparece a su lado, uno a uno, a medida que el visitante hace scroll. Es la forma más rápida de ver «I am parent» y «Get parent» (Escenas fijadas) funcionando juntos de principio a fin, antes de construir algo más grande.
Estructura
section .stage-section "I am parent" · height: 300vh · padding: 0
└─ div .stage position: sticky · top: 0 · min-height: 100vh
├─ h2 el título fijo — sin animación, se queda tal cual
└─ div .stage__item ×3 "Get parent" + una animación de entrada cada uno (p. ej. Fade in)
.stage-section { padding: 0; overflow-x: hidden; }
.stage {
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
align-items: center;
gap: 48px;
}
Cada .stage__item tiene su propia ventana Start/End en la escala 0–100% que dan los 300vh de la
sección (ver la tabla de la ventana del anclaje)
— por ejemplo 25–45, 45–65 y 65–85, así los tres elementos se revelan uno tras otro a medida
que la sección pasa por el scroll.
- Bricks
- Etch
- Gutenberg
En la sección: pestaña Style → ScrollTrigger Animations → I am parent container. En cada
.stage__item: Get parent, más una fila de Entrance Animations (Fade in funciona bien) con
su propio Start/End.
Los mismos dos ajustes y la misma animación de entrada, en los paneles Fancy equivalentes de la sección y de cada elemento.
Los mismos dos ajustes, en el panel Fancy de la barra lateral del bloque de la sección y del bloque de cada elemento.