Cargando
Demos en vivo

Páginas web interactivas en 3D: a qué pueden responder, con ejemplos

Una página web interactiva en 3D es una página cuya escena responde a lo que hace quien la visita: el scroll mueve la cámara, el cursor inclina la luz, un dedo empuja una tela, un nombre escrito aparece en la escena. Casi toda web es interactiva en el sentido simple —enlaces, botones, formularios—; en una 3D, lo que responde es la propia imagen.

Actualizado el

Aquí tienes los tipos de interacción a los que puede responder una página 3D, cada uno con una demo en vivo para abrir en el ordenador o en el móvil, y después los límites: lo que falla en las pantallas táctiles, con el sonido y para los buscadores.

El scroll, como cámara

La interacción más habitual, y la que hace todo el mundo sin que se lo pidan: bajar por la página. En una web interactiva en 3D, la barra de desplazamiento se convierte en una línea de tiempo, y cada parte de la página es un plano: la cámara se acerca, rodea o atraviesa la escena a medida que bajas.

Abre Studio, donde el scroll te pasea por una galería blanca delante de cada proyecto enmarcado, o Casa, donde levanta una vivienda a partir de su plano y la recorre estancia a estancia. Respeta el scroll del navegador: en las pruebas de usabilidad de NN/g sobre el scrolljacking —páginas que cambian el ritmo o la dirección del desplazamiento—, la mayoría de los participantes acabaron al menos algo desorientados, y en el móvil fue peor.

El cursor, como luz y profundidad

Una escena que sigue al puntero parece viva antes de que el visitante haga nada a propósito: la cámara se inclina un poco, la luz se mueve, los reflejos se deslizan. En la mayoría de los kits de Promti la escena sigue al puntero, y en varios ese efecto se apaga si el visitante ha pedido a su sistema reducir el movimiento.

En el móvil no hay cursor. MDN recuerda que muchas pantallas táctiles no pueden «pasar por encima», así que lo que solo ocurre al pasar el ratón allí no ocurre nunca. En algunos kits —Casa y Música— el efecto del puntero se apaga en el móvil, donde el trabajo lo hace el scroll.

El tacto: algo que empujar

El momento más fuerte es cuando la escena cede ante ti. En Moda, cada look cuelga como una tela propia que respira con un viento lento y cede bajo el cursor, o bajo el dedo en el móvil. Los navegadores tratan el ratón, el lápiz y el dedo como un mismo tipo de entrada —los pointer events—, así que el mismo efecto puede funcionar en los dos.

Que sea un premio y no una puerta: los precios, las piezas y el botón tienen que funcionar sin que nadie toque la tela.

Un toque que abre algo

Un solo toque puede ser toda la historia. Boda es una invitación de boda hecha web: una carta sobre un mantel de lino, con el nombre del invitado escrito a mano, cerrada con un sello de lacre. Un toque o un clic rompe el sello y la tarjeta sale hacia ti, con los días que faltan. Cada invitado recibe su propio enlace, con su nombre en el sobre.

Tu nombre, dentro de la escena

Escribir también es interactuar. En la página de cada kit hay un campo para tu nombre: lo escribes y la página lo toma, y al continuar lo ves ya en tu propia web 3D, antes de pagar nada. Es la forma más rápida de ver si una escena funciona con tus palabras en lugar de las de la demo.

El sonido y la hora

Una escena puede responder a cosas que el visitante no hace con la mano. En Música, la portada, hecha de luz, se mueve con lo que suena de verdad: el bombo la hace respirar y los agudos la hacen destellar, leídos de la propia canción en el navegador. En Evento, la cuenta atrás corre en directo en el rótulo de encima de la puerta, y cuando la fecha ya ha pasado la página da las gracias en vez de vender entradas.

El sonido tiene su propia regla: los navegadores no dejan que una página suene antes de que el visitante haya interactuado con ella. La política de reproducción automática de Chrome permite el sonido cuando el usuario ya ha hecho clic o tocado la web, así que la música debe empezar con un gesto y tener siempre un botón visible para apagarla.

Lo que hay que dejar fuera de la interacción

Los textos. Google dice que su buscador no hace scroll ni clics, así que lo que solo aparece tras una interacción puede no verlo nunca. Títulos, precios y botones van en el HTML desde el principio; la interacción puede traerlos a la pantalla, no crearlos.

La lentitud. Google mide lo que tarda una página en responder a un clic, un toque o una tecla —el Interaction to Next Paint—, y web.dev da por bueno 200 milisegundos o menos. Una escena pesada que lo redibuja todo a cada toque es donde eso se pierde.

El movimiento que nadie ha pedido. La guía de accesibilidad del W3C cita mareos, náuseas y dolores de cabeza entre las reacciones de las personas con trastornos vestibulares al movimiento que provoca una interacción; el ajuste de movimiento reducido del sistema debería calmar la escena. NN/g vio además que las animaciones de texto ligadas al scroll, mal usadas, ralentizan la lectura. Cuando la interacción es lo importante, como en una web inmersiva, todo lo demás tiene que ser sencillo.

Ábrelas en tu móvil

Cada una es una página que funciona, no un vídeo. Son los kits de Promti —webs interactivas en 3D, cada una hecha para un tipo de negocio—, así que la tuya llevaría tus textos, tus colores y tus fotos o tu modelo. Hay más ejemplos, ordenados por lo que hace el 3D, en páginas web 3D: ejemplos.

Preguntas

¿Qué es una página web interactiva?
Una web que responde a lo que hace quien la visita —bajar, mover el puntero, tocar, escribir— más allá de seguir un enlace. En una web interactiva en 3D responde la propia escena: la cámara se mueve con el scroll, la luz con el cursor, un objeto bajo el dedo.
¿Qué diferencia hay entre una web interactiva y una web inmersiva?
Interactiva quiere decir que la página te responde; inmersiva, que la recorres en vez de leerla. Casi todas las webs inmersivas son interactivas, y el scroll es su interacción principal. Qué es una web inmersiva explica la segunda.
¿Las webs interactivas en 3D funcionan en el móvil?
Si están hechas para el tacto: en la mayoría de pantallas táctiles no se puede pasar por encima, así que los efectos ligados al cursor necesitan una versión táctil o ninguna, y el scroll debe seguir siendo el del navegador. Todas las demos de esta página se abren en el móvil.
¿Una web interactiva en 3D perjudica el SEO?
No, si los textos están en el HTML desde el principio. Google no hace scroll ni clics y no indexa lo que se dibuja en un canvas, así que un texto que solo existe dentro de la escena, o solo tras una interacción, para él no está. Velocidad, SEO y 3D cuenta el resto.
¿Cuánto cuesta una página web interactiva en 3D?
Un kit de Promti cuesta 500 €, en un solo pago, con sus interacciones ya hechas y probadas en el móvil. Una a medida empieza en 750 €, y cuánto cuesta una web 3D compara agencias, freelances y creadores de webs.