Estructura y ritmo del scroll, sin diseño. Ocho escenas; las rayadas en el mapa se quedan fijas mientras el scroll mueve la animación. La zapatilla es una secuencia de unos 180 frames pintados en canvas según el scroll.
shoes.goatmode.xyz marca y modelo: por definir 28-10-2026
Mapa del scroll (altura en vh)
01 hero 150
02 giro 360 · 300
03 despiece 250
04 material 150
05 ficha 100
06 colores 300
07 compra 100
08
desliza
titular gigante detrás de la zapatilla
01
Hero
fijo · 150vh
Barra arriba: logo, tres enlaces, carrito.
Titular de dos líneas a todo el ancho, por detrás de la zapatilla.
Zapatilla de perfil en el centro (frame 0).
Abajo: nombre del modelo y precio; a la derecha, aviso de scroll.
Al bajar: el titular sube y se apaga, la zapatilla gira de perfil a tres cuartos (frames 0 a 40) y crece un poco.
claim 1 · cifra grande
claim 2
claim 3 (entra luego)
02
Giro 360
fijo · 300vh
La zapatilla da una vuelta completa en el centro (frames 40 a 160).
Tres claims con una cifra grande cada uno, en lados alternos.
Barra fina de progreso con tres marcas.
Cada claim entra al llegar a su tercio del giro y sale al siguiente. La cifra cuenta una sola vez, sin bucle.
upper · dato mono
mediasuela · dato
suela · dato
03
Despiece
fijo · 250vh
La zapatilla queda de lado y se separa en tres capas: upper, mediasuela y suela.
Cada capa tiene una línea guía a su etiqueta: nombre y un dato técnico.
Abajo, una frase que resume la idea del modelo.
Las capas se abren al bajar y vuelven a cerrarse justo al final de la escena. Es una secuencia de frames propia, aparte de la del giro.
macro del tejido a sangre
04
Material de cerca
fijo · 150vh
Foto macro del material ocupando toda la pantalla.
Texto grande encima, de tres líneas.
La foto empieza muy cerca y se aleja con el scroll. El texto entra línea a línea con máscara.
peso · g
drop · mm
altura · mm
retorno · %
frente a la versión anterior
05
Ficha técnica
scroll normal
Cuatro cifras grandes en monoespaciada con su unidad.
Debajo, dos barras: versión anterior y esta.
Solo un respiro: las barras crecen una vez al entrar en pantalla. Nada más se mueve.
01 / 04
el scroll vertical mueve la pista en horizontal
06
Colores
fijo · 300vh · horizontal
Cuatro colores, cada uno a pantalla completa con el fondo teñido de su tono.
Número y nombre del color arriba a la izquierda.
Muestras abajo: marcan en cuál estás y permiten saltar.
El scroll hacia abajo desplaza la pista hacia la izquierda. El fondo de la página cambia de tono con cada color.
color
talla
07
Compra
scroll normal
Izquierda: la zapatilla en el color elegido en la escena 06.
Derecha: nombre, precio, color, rejilla de tallas (las agotadas, atenuadas) y botón de compra.
Debajo del botón: envío y devoluciones en una línea.
La zapatilla llega aquí desde la escena anterior y se queda quieta. Al cambiar color, cambian la foto y el tono del fondo.