Una página de producto guiada por el scroll es un sitio de una sola página en el que un vídeo o una animación del producto avanza cuando el visitante se desplaza hacia abajo y retrocede cuando se desplaza hacia arriba. El método más habitual divide el vídeo en fotogramas individuales y dibuja el fotograma correspondiente en un elemento canvas según la posición del scroll.
Este artículo explica de dónde surgió la técnica, tres formas de implementarla, las reglas de rendimiento y accesibilidad, los errores habituales y cómo Yeşilçam Studios crea este tipo de página a partir de un vídeo de montaje.
¿Qué es una página de producto guiada por el scroll?
En una página de producto clásica, el vídeo empieza con un botón de reproducción y avanza a su propio ritmo. En una página guiada por el scroll, el visitante controla el tiempo: la barra de desplazamiento está ligada a la línea de tiempo del vídeo. Cuando el visitante se detiene, la imagen se detiene; cuando vuelve atrás, el producto rebobina. Esa sensación de control le invita a estudiar las piezas, las capas o el giro del producto.
La técnica se difundió a finales de la década de 2010 a través de las páginas de lanzamiento de las grandes marcas tecnológicas. Las páginas en las que unos auriculares se desmontaban o un teléfono giraba al desplazarse se convirtieron pronto en un lenguaje reconocible del marketing de producto. Hoy el mismo enfoque se usa también en las páginas de aterrizaje de marcas pequeñas.
¿Qué métodos se pueden usar para una animación guiada por el scroll?
| Método | Cómo funciona | Ventaja | Inconveniente |
|---|---|---|---|
| Secuencia de imágenes y canvas | El vídeo se divide en fotogramas; el fotograma correspondiente se dibuja en un canvas según el avance del scroll | Precisión fotograma a fotograma y comportamiento coherente en todos los navegadores | Muchos archivos que descargar |
| Búsqueda en el vídeo | La posición de reproducción de un único archivo de vídeo sigue al scroll | Un solo archivo, poco peso | Se entrecorta al retroceder; no es fluido salvo que se codifique con fotogramas clave frecuentes |
| Líneas de tiempo de scroll en CSS | Las animaciones CSS se vinculan directamente a la posición del scroll | No requiere JavaScript, fluido | Anima propiedades CSS, no fotogramas de vídeo; la compatibilidad de los navegadores es desigual |
Para reproducir un vídeo de producto, la secuencia de imágenes es la opción más robusta. Las líneas de tiempo de scroll en CSS son adecuadas para movimientos complementarios como titulares, textos y transiciones de tarjetas; en los navegadores que no las admiten, la página debe seguir funcionando en una forma sencilla.
¿Cuáles son los componentes de una página guiada por el scroll?
Escenario fijo
La zona donde se reproduce la animación permanece fija en pantalla mientras el visitante recorre una sección larga. La altura de esa sección determina la «duración» de la animación: cuanto más alta es la sección, más lenta es la reproducción.
Secuencia de fotogramas
El vídeo se divide en imágenes comprimidas con una resolución adecuada a la pantalla. Los formatos modernos como WebP reducen notablemente el tamaño de los archivos. Servir una secuencia más pequeña a los dispositivos móviles reduce aún más la carga.
Capa de texto
El titular, las características, la historia y las secciones de contacto se escriben como texto HTML real. Así los buscadores leen el contenido, los lectores de pantalla lo anuncian y los visitantes pueden seleccionarlo.
Vista de respaldo
Antes de que se cargue la secuencia de fotogramas, se muestra el primer fotograma como imagen de póster para que el visitante nunca vea una zona vacía.
¿Cómo se crea paso a paso una página de producto guiada por el scroll?
- Prepare la animación de origen. Elija un vídeo de 5 a 20 segundos con una historia clara, como un montaje, un giro del producto o un movimiento de apertura.
- Divida el vídeo en fotogramas. En la mayoría de los casos bastan entre 24 y 30 fotogramas por segundo; los vídeos muy largos inflan el número de archivos sin aportar nada.
- Comprima los fotogramas y prepárelos en dos tamaños (escritorio y móvil).
- Construya el esqueleto de la página: un canvas fijo, una larga sección de scroll a su alrededor y las secciones de texto.
- Convierta el avance del scroll en un número de fotograma y dibuje dentro de requestAnimationFrame; no dibuje directamente en cada evento de scroll.
- Precargue los fotogramas por orden: primero el fotograma inicial y algunos intermedios, después el resto. Cuando el visitante llegue a un fotograma que aún no se ha cargado, muestre el más cercano que sí lo esté.
- Respete la preferencia de movimiento reducido, haga pruebas en móvil y mida la velocidad de la página.
¿Cuántos fotogramas se necesitan y cuánto pesará la página?
Un cálculo sencillo facilita la planificación. Un vídeo de 10 segundos a 24 fotogramas por segundo son 240 fotogramas. Si cada fotograma comprimido pesa de media 60 KB, se descargan unos 14 MB en total; sin comprimir, los mismos fotogramas pesan muchas veces más. Hay tres formas de reducir el peso:
- Menos fotogramas: en una animación que se reproduce con el scroll, de 12 a 15 fotogramas por segundo suelen verse fluidos, porque es el visitante quien marca la velocidad.
- Resolución ajustada a la pantalla: no envíe nunca fotogramas de tamaño escritorio a un dispositivo móvil.
- Carga progresiva: descargue primero fotogramas muy espaciados y después los intermedios; la animación funciona pronto de forma aproximada y gana fluidez a medida que avanza la carga.
La altura de la sección de scroll también condiciona la experiencia. Como regla práctica, reservar de una a dos alturas de pantalla de desplazamiento por cada segundo de animación da un ritmo al que los visitantes pueden seguir el movimiento con comodidad.
¿Qué hay que cuidar en rendimiento y accesibilidad?
El mayor riesgo de una página guiada por el scroll es el peso. Si se descargan cientos de fotogramas en alta resolución, la página se abre despacio y consume datos móviles. Mantenga los fotogramas en la resolución que la pantalla puede mostrar realmente, cargue rápido el primer fotograma y traiga el resto de forma gradual.
En cuanto a la accesibilidad, la regla básica es respetar el ajuste de reducir movimiento del sistema operativo. La consulta prefers-reduced-motion de CSS comunica esa preferencia; cuando está activada, muestre un fotograma fijo o una breve serie de imágenes en lugar de la animación. En las personas con sensibilidad al movimiento, los movimientos de gran escala pueden provocar mareos.
- No secuestre el scroll: el código que cambia la velocidad de desplazamiento o encaja la página por secciones a la fuerza agota a los usuarios.
- No ponga información solo dentro de la animación; todo mensaje importante debe existir también como texto.
- Ofrezca navegación por teclado, un foco visible y un contraste de texto suficiente.
- Dé al canvas una descripción significativa o márquelo como decorativo.
¿Cuáles son los errores más habituales?
- Reproducir el vídeo mediante búsqueda directa y acabar con una imagen que se entrecorta al volver atrás.
- Dejar los fotogramas a resolución completa y hacer la página varios megabytes más pesada.
- Hacer la sección de scroll demasiado corta: la animación pasa como un relámpago y el visitante no ve nada.
- Incrustar el texto en las imágenes: los buscadores y los lectores de pantalla no pueden leerlo.
- No hacer pruebas en móvil: en una pantalla vertical, el producto puede salirse del encuadre.
¿Cuándo no conviene una página guiada por el scroll?
No todos los productos se benefician de una página guiada por el scroll. Una página de producto clásica puede funcionar mejor en estos casos:
- Cuando los visitantes quieren llegar rápido al precio y a la disponibilidad, por ejemplo en un catálogo con muchos productos.
- Cuando el producto no tiene una historia visual; en productos sencillos de una sola pieza, una animación de scroll solo añade espera.
- Cuando gran parte del público llega con conexiones lentas.
¿Cómo se mide si una página guiada por el scroll funciona?
Resultar impresionante no es, por sí solo, un éxito. Seguir estas métricas después del lanzamiento muestra si la página funciona de verdad:
- Profundidad de scroll: qué proporción de visitantes llega al final de la animación.
- Clics en la llamada a la acción: la proporción de quienes pulsan el botón que sigue a la animación.
- Tiempo de carga del primer contenido visible: con qué rapidez aparece el fotograma de póster.
- Móvil frente a escritorio: la misma página puede comportarse de forma distinta en los dos grupos de dispositivos.
¿Cómo se crea una página de producto guiada por el scroll en Yeşilçam Studios?
Website Studio convierte un vídeo de Montaje / Desmontaje creado en Film Studio en un sitio de producto de una sola página que se reproduce fotograma a fotograma mientras el visitante se desplaza. Una vez creado el vídeo con una animación de montaje / desmontaje, pulse «Crear un sitio web a partir de este vídeo» en el vídeo terminado.
- Elija el vídeo de origen. Si lo desea, añada otro vídeo de Montaje o una imagen como segunda escena.
- Escriba el nombre de la marca, el nombre del producto, el titular principal y los textos; todos los campos son opcionales, y Sam completa lo que deje vacío con textos de ejemplo adecuados a su producto.
- Si lo desea, introduzca la dirección de su sitio web; se leen la página de inicio y una página interior para tomar el nombre de la marca, los colores, el logotipo y los textos.
- Elija las secciones del menú (Características, Historia, Galería, Preguntas, Contacto), el color del tema, el idioma del sitio y el fondo. Si elige Paisaje de tinta como fondo, queda fijo en los dispositivos que tienen activada la reducción de movimiento.
- Para la galería, use solo fotogramas del vídeo (gratis) o genere hasta 8 imágenes.
- Pulse «Crear el sitio con Sam».
Cuando el sitio está listo, puede ajustar su visibilidad en «Solo usted» o «Público», compartir el enlace de vista previa o descargar el sitio como ZIP. Editar después los textos y el tema y volver a empaquetar es gratis. Con la tarifa de lista Basic, la creación de un sitio cuesta 8.751 tokens (0,05 $) y cada imagen generada 8.751 tokens (0,05 $); la redacción se muestra por separado en el presupuesto, y el plan Free aplica ×1,3 y el plan Pro ×0,8. Encontrará los detalles en la guía de Website Studio y en la guía de publicación, y los precios actuales en la página de precios.
Preguntas frecuentes
¿Una página guiada por el scroll perjudica al SEO? No, siempre que el texto sea HTML real y la página cargue rápido. Los problemas surgen cuando el contenido solo existe dentro de imágenes y la página se vuelve pesada.
¿Debo usar un vídeo o una secuencia de imágenes? Para la reproducción vinculada al scroll, una secuencia de imágenes es más coherente; un archivo de vídeo pesa menos, pero puede entrecortarse al retroceder. Para vídeos de fondo que simplemente se reproducen, basta con un archivo de vídeo.
¿Qué es prefers-reduced-motion? Es una consulta de medios CSS que indica a una página web que el usuario ha pedido a su sistema operativo reducir el movimiento. Cuando está activada, se espera que las animaciones grandes se detengan o se simplifiquen.
¿Funcionan las páginas guiadas por el scroll en móvil? Sí, pero los fotogramas deben tener el tamaño adecuado para pantallas móviles y hay que comprobar que el producto se vea bien en un encuadre vertical.
¿Puede Website Studio crear un sitio desde cero, sin vídeo? A octubre de 2026, los sitios se crean a partir de un vídeo de Montaje / Desmontaje. La creación de un sitio solo a partir de una descripción se anuncia en la aplicación como próximamente.