Escaparate cinematográfico con scroll
Una sección reutilizable que convierte cualquier demo en un cortometraje: el vídeo se abre de una ventana a pantalla completa al hacer scroll y sigue una galería de fotos.
Objetivo técnico
Dar a cada demo el aire de una web hecha por una agencia —vídeo real, tipografía segura y movimiento— manteniéndolo en un único script sin dependencias que funcione en el móvil.
Restricciones
- Sin librerías de animación: un pequeño script por sección.
- Solo un vídeo decodificándose a la vez, para cuidar la batería y los datos.
- Debe respetar la preferencia de movimiento reducido y pasar a un diseño estático.
Arquitectura
- 01
Carrusel fijado
Una sección alta con un escenario fijo; el progreso del scroll controla el clip-path, la escala y el capítulo.
- 02
Capítulos
Hasta tres clips con fundido y subtítulos; solo se reproduce el clip activo.
- 03
Galería fijada
Una banda horizontal desplazada por el scroll, con paralaje en cada tarjeta.
- 04
Fotos propias primero
Cuando se conocen las fotos del propio negocio, abren la galería.
El flujo va de izquierda a derecha y de arriba abajo.
Decisiones clave
Vídeo en lugar de 3D procedural
La sala 3D procedural anterior parecía sintética. El vídeo con licencia hizo que la misma sección pareciera real al instante.
Estilos con espacio de nombres
La sección se inyecta en muchas plantillas distintas, así que cada clase lleva prefijo para evitar choques con el CSS de la plantilla: una lección aprendida de un fallo de diseño real.
Precargar solo el clip siguiente
El primer clip se carga de inmediato; cada clip siguiente pasa de preload='none' a precarga justo antes de necesitarse.
Capturas
Retos
Choques de CSS
Un nombre de clase genérico de la galería chocó con la regla de cuadrícula de una plantilla y encogió la banda. Poner prefijo a todos los selectores lo resolvió para siempre.
Solapamiento en el móvil
La llamada a la acción final se solapaba con la barra de acciones fija del móvil; en pantallas pequeñas ahora se oculta en favor de la barra.
Lecciones aprendidas
- El movimiento ligado al scroll debe depender de un único valor de progreso; todo lo demás se deriva de él.
- Los componentes inyectados deben defender sus propios estilos.
- Vídeo real con contención gana a gráficos generados recargados.