Глубина при прокрутке

Конструктор сайтов с параллаксом — без кода

Опишите место и получите одностраничный сайт, где небо, здания и передний план движутся с разной скоростью при прокрутке — без кода.

**Девятый причал · Ли Юэ** — Чжун Ли у перил с Путешественником и Паймон. Четыре слоя, от 0.12x до 1.0x.

**Улица фонарного рынка · Ли Юэ** — Глава II: фасады прилавков впереди, порт почти не двигается.

**Лестница Крановой стражи · Ли Юэ** — Цзян Лянь поднимается мимо каменных львов; пагода стоит, ступени идут вверх.

**Ворота · Школа Катагири** — Ворота и велопарковка, двое учеников ещё на дорожке.

**Класс 3-B · Школа Катагири** — Тридцать шесть парт впереди, свет из окон позади: одна страница, три расстояния.

**Крыша · Школа Катагири** — Перила идут быстрее всех, город внизу почти не движется.

**Доки · Логтаун** — Смокер на причале, ящики и бочки в восемь раз быстрее утренней воды.

**Площадь казни · Логтаун** — Слой толпы между помостом и площадью, рама колокола держится.

**Скала с маяком · Логтаун** — Трава скалы впереди, Драгон на тропе, маяк в полэкрана позади.

Весь фокус — в глубине. Слои рисует Studio.

Neta Studio — это конструктор миров на ИИ: одна фраза даёт мир с местами, персонажами и погодой. Страница с параллаксом — один из предметов, которые этот мир производит: одно и то же место рисуется один раз, а потом режется на слои, чтобы прокрутке было что разделять. По этому миру можно ещё ходить, играть в него или снимать его; эта страница отвечает только за глубину.

Слои из одного рисунка — небо, архитектура, предметы и силуэт переднего плана выходят из одного мастера, поэтому свет совпадает, даже когда они расходятся.
Скорости, которые чувствуются — у каждого слоя своя; передний план идёт примерно в восемь раз быстрее неба, и именно это читается как глубина, а не как затемнение.
Одна папка, без сборки — чистые HTML, CSS и PNG. Откройте локально, положите на любой хостинг или опубликуйте в мире и получите ссылку.

Частые вопросы

Что такое сайт с параллаксом?

Одностраничный сайт, где объекты на разном расстоянии движутся с разной скоростью при прокрутке. Небо плывёт, здания плывут сильнее, передний план проносится мимо. Глубина берётся из разницы скоростей, а не из 3D.

Нужен Photoshop, чтобы вырезать слои?

Нет. Сессия рисует мастер-рисунок на каждую сцену и отдаёт слои отдельными PNG, у переднего плана прозрачный край. Папку всё равно можно открыть в любом редакторе.

Чем это отличается от сайта с видео при прокрутке?

Сайт с видео прокручивает заранее отрендеренный облёт камеры — вы смотрите, как идёт материал. Здесь на неподвижной сцене лежат статичные слои: ничего не снято, файлы лёгкие, а скорость любого слоя меняется одним числом.

Можно взять свой мир или существующий IP?

Да. Назовите место и персонажей или укажите мир, который уже построили, — слои рисуются по его архитектуре, поэтому сцены остаются согласованными.

С какого числа сцен начать?

С трёх. Одна сцена доказывает эффект, три дают начало, середину и финал. Каждая сцена добавляет четыре слоя.

Будет ли работать на телефоне?

Да. Касание ведёт те же скорости, сцена занимает весь экран, а в портрете текст пересобирается. При prefers-reduced-motion слои стоят на месте, и страница становится обычной иллюстрированной одностраничкой.

Можно потом поменять тексты и скорости?

Да. Текст — обычный HTML, а скорость каждого слоя — одно число в скрипте. Поменяйте 0.12 на 0.2, и небо пойдёт быстрее; остальной странице всё равно.

Нужно самому размещать сайт?

Нет. Публикация внутри мира даёт ссылку, которая открывается в браузере. Папку также можно без изменений положить на любой статический хостинг.

Дайте месту глубину.

Одна фраза, три сцены, по четыре слоя — и ссылка, которая открывается.

Сделать сайт с параллаксом