Profundidad al hacer scroll

Creador de sitios con paralaje — sin código

Describe un lugar y obtén una página donde el cielo, los edificios y el primer plano se mueven a velocidades distintas al hacer scroll, sin código.

El mercado, a media páginaAula 3-B, después del timbreLa plaza, entre la multitudLa azotea, junto a la barandilla
✦Sitio de paralaje
Crear un sitio de paralaje para Puerto de Liyue al anochecer — el muelle, el mercado de faroles, la escalera de la pagoda
El Noveno Muelle · Liyue
El Noveno Muelle · Liyue — Zhongli en la barandilla con el Viajero y Paimon. Cuatro capas, de 0.12x a 1.0x.
Calle del mercado de faroles · Liyue
Calle del mercado de faroles · Liyue — Capítulo II: frentes de puestos y casas delante de un puerto que apenas se mueve.
La escalera de Crane Watch · Liyue
La escalera de Crane Watch · Liyue — Jiang Lian sube entre los leones de piedra; la pagoda se queda y los escalones suben.
La puerta · Instituto Katagiri
La puerta · Instituto Katagiri — La puerta y el aparcabicis, con dos estudiantes todavía en el camino.
Aula 3-B · Instituto Katagiri
Aula 3-B · Instituto Katagiri — Treinta y seis pupitres delante, luz de ventana detrás: una página, tres distancias.
La azotea · Instituto Katagiri
La azotea · Instituto Katagiri — La barandilla va más rápido; el pueblo de abajo apenas se desplaza.
Los muelles · Loguetown
Los muelles · Loguetown — Smoker en el muelle, cajas y barriles ocho veces más rápidos que el agua del amanecer.
La plaza de la ejecución · Loguetown
La plaza de la ejecución · Loguetown — La capa de multitud entre el cadalso y la plaza, el marco de la campana aguanta.
El acantilado del faro · Loguetown
El acantilado del faro · Loguetown — Hierba de acantilado delante, Dragon en el sendero, el faro media pantalla atrás.

Todo el truco es la profundidad. Studio dibuja las capas.

Neta Studio es un constructor de mundos con IA — una frase te da un mundo con lugares, reparto y clima. Una página de paralaje es una de las cosas que ese mundo produce: el mismo lugar se dibuja una vez y se parte en capas, para que el scroll tenga algo que separar. Ese mundo también se recorre a pie, se juega o se filma; esta página solo se ocupa de la profundidad.

  • Capas de una sola obra — cielo, arquitectura, objetos y silueta de primer plano salen del mismo máster, así que la luz sigue cuadrando cuando se separan.
  • Velocidades que se sienten — cada capa tiene la suya; el primer plano va unas ocho veces más rápido que el cielo, y eso es lo que se lee como profundidad y no como un fundido.
  • Una carpeta, sin compilar — HTML, CSS y PNG normales. Ábrela en local, súbela a cualquier hosting o publícala en el mundo y tendrás un enlace.

Preguntas frecuentes

¿Qué es un sitio con paralaje?

Una página en la que cosas a distintas distancias se mueven a velocidades distintas al hacer scroll. El cielo se desplaza, los edificios más, el primer plano pasa volando. La profundidad viene de la diferencia, no del 3D.

¿Necesito Photoshop para recortar las capas?

No. La sesión dibuja una obra maestra por escena y devuelve las capas como PNG separados, el primer plano con borde transparente. Aun así puedes abrir la carpeta en cualquier editor.

¿En qué se diferencia de un sitio con vídeo al scroll?

Un sitio con vídeo hace scrubbing de un vuelo de cámara prerrenderizado: ves metraje pasar. Aquí se apilan capas quietas sobre un escenario fijo: nada se filma, los archivos pesan poco y puedes cambiar el ritmo de cualquier capa tocando un número.

¿Puedo usar mi propio mundo o una IP existente?

Sí. Nombra el lugar y el reparto, o apunta a un mundo que ya construiste: las capas se dibujan desde su arquitectura, así las escenas quedan coherentes.

¿Con cuántas escenas empiezo?

Con tres. Una escena demuestra el efecto; tres dan apertura, medio y cierre. Cada escena añade cuatro capas.

¿Funciona en el móvil?

Sí. El scroll táctil mueve las mismas velocidades, el escenario llena la pantalla y el texto se reajusta en vertical. Con prefers-reduced-motion las capas se quedan quietas y la página pasa a ser una one-page ilustrada normal.

¿Puedo editar los textos y las velocidades después?

Sí. El texto es HTML normal y la velocidad de cada capa es un número en el script. Cambia 0.12 por 0.2 y el cielo irá más rápido; al resto de la página le da igual.

¿Tengo que alojarlo yo?

No. Publicarlo dentro del mundo te da un enlace que se abre en el navegador. La carpeta también se puede subir tal cual a cualquier hosting estático.

Dale profundidad a un lugar.

Una frase, tres escenas, cuatro capas cada una — y un enlace que se abre.

×