El horno ya está a punto

Cómo funciona

Dos fotos reales, cruzadas una sobre la otra, y una vuelta que nadie nota

No hay animación programada ni escena dibujada: son dos fotos del mismo horno sacadas con un instante de diferencia. La de arriba pasa de invisible a visible con una curva suave, y después vuelve por el mismo camino. Todo lo demás de la escena está quieto y alineado al píxel, así que lo único que se mueve es lo que realmente se movió.

1 2

Cuadro A segundo 0

1 2

Cuadro B segundo 3

• 1La llama del horno crece y cambia de forma. En A es un resplandor bajo sobre la leña; en B se levanta y lame el techo del horno. Es el latido del fuego, no un efecto.
• 2El vapor de la pizza se agranda y se corre. En A es un hilo fino; en B ya se abrió y subió hasta la boca del horno. Es el movimiento que más se nota.
• 3Todo lo demás está quieto. El ladrillo, el mesón, la pala y la pizza no se mueven ni un píxel entre una foto y la otra. Por eso el cruce no se lee como una transición.

Cuadro A · 0,0 s

▶ Reproducir

A · 0 sB · 3 sA · 6 s

Arrastrá el control (o movelo con las flechas del teclado). De 0 a 3 segundos va de A a B; de 3 a 6 vuelve de B a A por el mismo camino. Cuando llega otra vez a A, arranca de nuevo sin ningún salto: por eso no se ve la costura.

El interruptor

Ida y vuelta, o una sola pasada con el corte a la vista

Son las mismas dos fotos en los dos casos. Lo único que cambia es cómo vuelve al principio. Probá los dos botones y mirá el momento en que reinicia. Con video pasa exactamente lo mismo: si el video no vuelve por donde vino, el corte se ve.

Ida y vuelta Una sola pasada Saltar al final del bucle

acelerado ×2 cortes: 0

✓ Ida y vuelta (ping-pong)

La foto de arriba se desvanece y vuelve a aparecer por el mismo camino. Termina exactamente en el estado con el que empezó, así que el salto no existe. Podés dejarlo horas y nunca se nota.

✕ Una sola pasada (loop común)

Al llegar a B vuelve a A de un golpe: la llama cambia de forma en un solo cuadro y el vapor se achica de repente. Se ve un parpadeo, y el ojo lo agarra aunque el visitante no sepa explicarlo.

Estás viendo el modo ida y vuelta. Cambiá el interruptor para ver el problema que resuelve.

Con video y sin video

Qué se gana cuando en vez de dos fotos va un video

Las dos versiones salen de las mismas dos fotos de tu local. La diferencia es si se cruzan en el navegador o si antes pasan por una herramienta que arma el video del medio.

Si recién arrancás, la versión de dos fotos alcanza y sobra. El video conviene cuando la portada es la pieza del negocio y querés que aguante que la miren fijo.

Ficha técnica en criollo

Qué hay que saber antes de poner movimiento en la portada

<div class="portada">
  <img src="pizzeria-a.jpg" width="1600" height="1000" alt="…">
  <img src="pizzeria-b.jpg" width="1600" height="1000" alt="" id="foto-b">
</div>
<!-- las dos apiladas con position:absolute. Lo único que se anima es
     la opacidad de foto-b, de 0 a 1 y de vuelta, con curva suave -->

<video autoplay muted loop playsinline
       preload="metadata"
       poster="pizzeria-a.jpg"
       aria-hidden="true">
  <source src="horno-pingpong.webm" type="video/webm">
  <source src="horno-pingpong.mp4"  type="video/mp4">
</video>
<!-- el poster es el cuadro A: si algo falla, queda la misma foto -->

Datos de ejemplo

Lo que iría en la página de la pizzería

Precios, horarios y carta de ejemplo, para que veas cómo queda la pieza acompañada del resto del contenido. En una página real van los tuyos.

• Mozzarella salsa de tomate, mozzarella y orégano Gs. 55.000
• Napolitana tomate en rodajas, ajo y albahaca fresca Gs. 65.000
• Cuatro quesos mozzarella, provolone, azul y parmesano Gs. 78.000
• Tatatĩ especial panceta ahumada al horno, cebolla morada y rúcula Gs. 82.000
• Media pizza + gaseosa para uno, de lunes a jueves Gs. 38.000