Saltar al contenido

Cómo capturar las animaciones de scroll y el parallax en el vídeo de una web

Los fundidos de entrada, las apariciones, el parallax y las secciones fijadas solo ocurren mientras la página se desplaza de verdad. Cómo capturarlos en un vídeo, y por qué la mayoría de las herramientas de captura de página completa se los saltan.

Aviral LakhanpaulActualizado el 3 min de lectura

La respuesta corta

Las animaciones de scroll solo se ejecutan mientras la página se desplaza de verdad, así que una herramienta que recorre una única captura de la página completa no puede mostrarlas. O grabas la pantalla mientras un script desplaza la página, o usas un renderizador que capture la página en vivo en cada posición del scroll, como el motor Captura en vivo de Website Scroll Video. Para un resultado más rápido y sin el movimiento, lleva las animaciones de entrada a su estado final antes de capturar.

Por qué desaparecen las animaciones

La mayoría de las herramientas de URL a vídeo trabajan en dos pasos: hacen una captura de pantalla muy alta de la página y luego desplazan un encuadre a lo largo de ella. Es rápido y perfectamente fluido, pero la captura es un único instante. Todo lo que depende de la posición del scroll, como un titular que aparece con un fundido al entrar en el viewport, una imagen con parallax, una sección que se queda fijada y cambia mientras haces scroll o un contador que va subiendo, queda congelado en el estado en que estaba en ese instante.

Según cómo esté hecha la página, ese estado es uno de estos tres:

  • Terminado, que se ve bien pero estático.
  • Sin empezar, que deja huecos en blanco donde deberían estar las secciones, porque los elementos que esperan su fundido de entrada siguen invisibles.
  • A medias, pillado en mitad de un fundido o de un deslizamiento, que parece roto.

Tus opciones

Formas de capturar las animaciones de scroll
EnfoqueAnimacionesScrollVelocidad
Recorrer una imagen fija, con las entradas asentadasSe muestran en su estado finalCalculado, perfectamente uniformeRápido
Captura en vivo en cada posición del scrollSe reproducen como las ve un visitanteCalculado, con fotogramas fijosBastante más lento
Grabación de pantalla con un script de scrollSe reproducen en tiempo realTan uniforme como permita tu ordenadorTiempo real, más la edición

La vía rápida: asentarlas primero

Si las animaciones son solo de entrada, fundidos y deslizamientos que colocan el contenido en su sitio, la página suele verse bien en su estado final. En Website Scroll Video es el interruptor «Asentar animaciones», que se usa con el motor rápido Desplazamiento estático. Las animaciones de entrada se llevan hasta el final antes de leer la página, así que nada queda invisible ni a medias, y el scroll es tan fluido y tan rápido de renderizar como cualquier otro.

La vía fiel: capturarla en vivo

Cuando el movimiento es lo importante, como en la mayoría de las plantillas de Framer y Webflow, las webs de agencias y los lanzamientos de producto, cambia el motor a Captura en vivo. En lugar de recorrer una sola imagen, lleva un navegador real a cada posición del scroll y hace una captura ahí, así que las apariciones, el parallax, las secciones fijadas y las transformaciones ligadas al scroll se reproducen en el vídeo exactamente como en la página.

  • El scroll se sigue calculando, así que es tan uniforme como con Desplazamiento estático y mantiene una frecuencia fija de 24, 30 o 60 fps.
  • Las pausas, los hovers, los marcos y los fondos funcionan con él exactamente igual que con Desplazamiento estático.
  • Mantiene un navegador real abierto durante toda la duración del vídeo, por eso tarda bastante más en renderizar y suma 13 créditos a una exportación. Está disponible en cualquier cuenta desde la primera exportación, sin ningún plan que desbloquear.

Grabarlo tú

Para una página a la que un renderizador no puede llegar, grábala en pantalla mientras un script hace el scroll. La guía de scroll automático tiene el script. Hay dos cosas a vigilar:

  • Las webs que usan una librería de scroll suave, como Lenis o Locomotive Scroll, suelen mover sus animaciones desde la librería y no desde el scroll del navegador. Un script que llame a window.scrollTo puede saltárselas. Haz scroll como la web espera, o graba con la librería desactivada y acepta la diferencia.
  • Las páginas cargadas de animaciones son las que más fotogramas pierden al grabar. Cierra todo lo demás, graba a 60 fps y, si la toma sigue dando tirones, consulta cómo eliminar los tirones en las grabaciones de scroll.

Pruébalo con tu propia web

Pega un enlace y previsualiza el scroll gratis. 51 créditos gratis al registrarte, sin tarjeta y sin marca de agua en nada de lo que exportes.

Búsquedas recientes

    Preguntas, respondidas

    La versión corta de lo que se suele preguntar después.

    Contacto
    ¿Por qué hay secciones en blanco en mi vídeo con scroll de una web?

    Son elementos que esperaban una entrada activada por el scroll que nunca se disparó, porque la herramienta capturó una imagen fija de la página. Asienta las animaciones antes de capturar, o usa un motor de captura en vivo que desplace la página real.

    ¿Puedo grabar los efectos de parallax?

    Sí, con un método que desplace la página de verdad: una grabación de pantalla guiada por un script, o un renderizador que capture en cada posición del scroll, como Captura en vivo en Website Scroll Video.

    ¿La Captura en vivo cuesta más?

    Suma 13 créditos a una exportación, porque mantiene un navegador real funcionando durante toda la duración del vídeo. Todo lo demás del precio es igual.

    Logotipo de Website Scroll Video, un botón de reproducción sobre una página web en una ventana del navegador.

    Menos tiempo grabando. Más tiempo creando.

    Automatiza las grabaciones de webs con movimiento personalizable, controles inteligentes y opciones de exportación pensadas para creadores de hoy.