Cómo se hace esto con el video de tu obra
Acá la escena está dibujada con código, pero el efecto es el mismo que usan las marcas grandes. Con un cliente real el camino es este, y es más simple de lo que parece.
- Se filma una sola vez Un timelapse de la obra, o una vuelta con dron, o el auto girando sobre una base. Con 20 a 40 segundos de material limpio alcanza y sobra.
- El video se corta en fotos Ese video se exporta como una secuencia de 120 a 240 imágenes, todas del mismo tamaño y bien comprimidas: unos 15 a 25 KB cada una. El total termina pesando como dos fotos grandes de las que se suben hoy.
- Se precargan de a poco Mientras el visitante lee lo de arriba, el navegador va bajando los cuadros en orden y los deja guardados. Cuando llega a la sección ya están todos listos, y no se ve ni un parpadeo.
-
El scroll elige cuál se muestra
Se mide dónde está la sección respecto de la pantalla: eso da un número de 0 a 1. Ese número se multiplica por la cantidad de cuadros y se dibuja el que toca. Siempre dentro de
requestAnimationFrame, nunca en el listener del scroll.
¿Y por qué no un <video> con el tiempo forzado?
Se puede: se pone un video y se le va cambiando el currentTime según el scroll. En la compu anda bastante bien. En el celular, no.
Cada vez que movés el dedo, el navegador tiene que ir a buscar ese instante exacto adentro de un archivo comprimido, y ese salto no es gratis: se cuelga una fracción de segundo, va a los tirones y a veces ni arranca hasta que el visitante toca la pantalla. Peor todavía si la conexión es de datos móviles.
Con las imágenes sueltas cada cuadro es independiente y ya está en memoria: cambiar de uno a otro es como pasar hojas. Por eso este camino es el que se usa cuando el efecto tiene que andar en cualquier teléfono, que es justo donde te miran los clientes.
Una aclaración honesta: en esta demo no hay ni video ni fotos. La casa está dibujada con código, cuadro por cuadro, sobre un canvas. Por eso pesa unos pocos KB, nunca se pixela por más que agrandes la pantalla y se adapta sola al celular. Con un cliente real hacemos lo mismo pero con el video de su obra, su fábrica o su producto.
¿Tenés una obra filmada?
Aunque sea con el celular. Contanos qué querés mostrar y te decimos si sirve para armar este efecto.
Escribinos por WhatsApp