Лена собрала лендинг курса в Cursor и вставила красивый баннер из Midjourney. В макете – «вау», на сайте – плоско. Друг скинул гайд «параллакс за 15 минут на JS»: слои дёргались на телефоне, заголовок уехал под картинку. Боль знакома – хочется живой первый экран, но кажется, что эффект параллакса только для фронтендеров. Ответ за вечер: агент PARALAXIMUS, один 2K-атлас через MCP и локальный Hero со скроллом – без учебника по requestAnimationFrame.
Параллакс простыми словами – слои картинки едут с разной скоростью при скролле или движении мыши: дальние чуть сдвигаются, ближние сильнее. Workflow новичка: бриф оффера → MCP gpt-image-2 (атлас 2×2) → /paralaximus → нарезка слоёв → python -m http.server 8123 → проверка в браузере. Parent «параллакс» – около 15877 показов/мес, «эффект параллакса» – 1613, how-to «как сделать эффект параллакса» – 128 (Яндекс Вордстат, Россия, 14.07.2026). Не учите CSS transform с нуля – сначала соберите сцену агентом.
Сюрприз из стандартов: WCAG 2.3.3 прямо называет parallax scrolling примером анимации, от которой может закружиться голова. В boilerplate PARALAXIMUS уже встроен prefers-reduced-motion – у классических гайдов 2020-х этот чек часто отсутствует. Конкуренты (Kurshub, Hexlet, Active Vision) учат background-attachment и scroll+transform руками. Ниже – путь маркетолога в Cursor: один атлас, четыре слоя, локальный preview.
Зачем маркетологу параллакс Hero, а не «просто красивая картинка»
Боль «баннер красивый, сайт плоский» решается не ещё одной генерацией, а глубиной первого экрана. Hero – шапка лендинга: оффер, лицо/товар и кнопка. Параллакс эффект на сайте даёт объём: фон чуть отстаёт, передний план реагирует быстрее. На практике это выглядит дороже плоского JPG, если слои согласованы.
| Критерий | Одна картинка-баннер | Ручной JS/CSS из туториала | PARALAXIMUS в Cursor |
|---|---|---|---|
| Что получаете | Статичный кадр | Слои + код, который правите сами | Локальный Hero со scroll/mouse |
| Риск новичка | Плоско, «как у всех» | Дёрганье на телефоне, тошнота от сильного сдвига | Нужны MCP и один атлас, не «четыре промпта» |
| Стиль | Случайный | Зависит от копипаста | Лучше после DESIGN.md / мудборда |
| Время до preview | Минуты | «15 минут» + отладка | Ориентир 3–5 минут при рабочем MCP |
Вердикт: если цель – живой первый экран без студии, используйте агентский путь. Не делайте прыжок «красивый баннер → тяжёлый scroll с чужого сайта». Сначала стиль (DESIGN.md или мудборд), потом параллакс.
Соберите бриф первого экрана до генерации атласа
Боль «агент нарисовал ветки поверх лица» закрывается коротким composition contract – договором, что на каком слое. Например, Лена пишет: курс по автоматизации, спокойный свет, лицо в центре, ветки только снизу как рамка, CTA не перекрывать.
- Шаг 1. Запишите оффер одной фразой и кто на Hero (лицо, продукт, сцена).
- Шаг 2. Добавьте тон и палитру (или ссылку на DESIGN.md / мудборд).
- Шаг 3. Укажите, что нельзя закрывать: лицо, товар, кнопка – центр читается.
- Шаг 4. Опишите слои: фон далеко, mid-детали, near только как рамка (≤10–25% субъекта).
- Шаг 5. Проверьте, что бриф лежит в проекте, а не в чате.
- Шаг 6. Добавьте запрет: четыре отдельные генерации вместо одного атласа 2×2.
Типичная ошибка – просить «сделай красиво» без рамки для переднего плана. Сделайте бриф первым. Избегайте огромного сдвига «на весь экран» уже в задумке – эффект должен быть subtle.
Установите PARALAXIMUS и проверьте MCP до первого /paralaximus
Боль «не знаю, с чего начать» закрывается двумя файлами и двумя инструментами. Субагент – инструкция для Cursor в .cursor/agents/: пишете /paralaximus, агент ведёт сценарий. MCP – «розетка» к сервисам: генерация картинки и снятие фона без Photoshop.
- Шаг 1. Откройте Horosheff/paralaximus-agent (MIT) и скопируйте .cursor/agents/paralaximus.md в проект.
- Шаг 2. Проверьте MCP gpt-image-2 (2K-атлас 16:9) и recraft_remove_background.
- Шаг 3. Если MCP нет – сначала подключение MCP; картинки – в гайде по MCP-картинкам.
- Шаг 4. Используйте сборку MCP «Всё подключено», если нужен готовый набор без ручного JSON.
- Шаг 5. Проверьте соседний AURA, если стиля ещё нет.
- Шаг 6. Не делайте DIY-удаление фона локальными скриптами – агент опирается на MCP.
- Шаг 7. Когда инструменты зелёные – вызывайте /paralaximus с темой оффера.
В реальном проекте без рабочего MCP атлас не соберётся. Ориентир: при подключенных инструментах сценарий укладывается в несколько минут, не в выходные с отладкой JS.
Соберите один Hero: атлас 2×2 → слои → preview
Боль «четыре картинки разного стиля» решается одним атласом. Представьте комикс 2×2 с общим светом: TL – background, TR – far, BL – near, BR – главный объект. Агент режет их в background.png / far.png / near.png / mug.png.
- Шаг 1. Вызовите /paralaximus: оффер, свет, слои, foreground только как рамка.
- Шаг 2. Дождитесь одного 2K-атласа 16:9 – не четырёх отдельных промптов.
- Шаг 3. Дайте нарезать слои; при дырах в альфе – recraft_remove_background.
- Шаг 4. Запустите python -m http.server 8123 в папке boilerplate.
- Шаг 5. Откройте http://127.0.0.1:8123/index.html и подвигайте скролл и мышь.
- Шаг 6. Если сцена плосковата – уменьшите data-speed у near и снова проверьте preview.
Схема workflow:
Бриф → MCP-атлас 2×2 → нарезка слоёв → http.server 8123 → scroll + mouse → правка композиции
Тут важный момент: если слои «стеклянные» или края кропа уродливые – не лечите тяжёлым JS. Вернитесь к промпту атласа. Часто ломается сцена из-за четырёх разных генераций «в одном стиле» – свет всё равно разъедется.
Чеклист перед вставкой на лендинг: читаемость и reduce-motion
Боль «страница тошнит или пляшет на мобиле» закрывается проверкой. Сделайте прогон по списку до публикации – дешевле support-тикетов после запуска (кейс Codexical, май 2026).
- Шаг 1. Проверьте: лицо/товар и CTA видны, near не закрывает субъект больше 10–25%.
- Шаг 2. Проверьте плавность на телефоне: нет рывков, заголовок читается.
- Шаг 3. Включите «уменьшить движение» и снова откройте сцену – почти статика.
- Шаг 4. Убедитесь, что boilerplate уважает prefers-reduced-motion.
- Шаг 5. Сверьте палитру с DESIGN.md / мудбордом.
- Шаг 6. Уберите огромные data-speed: subtle лучше «аттракциона».
- Шаг 7. Избегайте копипаста тяжёлых scroll-слушателей без теста на устройстве.
- Шаг 8. Дальше по кластеру – лендинг без кода и вайбкодинг для маркетинга.
Критерий успеха: при скролле и мыши слои едут с разной скоростью; заголовок читается; при Reduce Motion сцена почти статична; фон не закрывает лицо или товар. Результат: сможете показать локальный Hero коллеге в браузере без деплоя – все четыре пункта зелёные, first-win закрыт.
Что не делать и когда хватит простого CSS
Иногда хватает background-attachment: fixed – картинка чуть отстаёт от текста. Это не слоёный Hero, но для короткой страницы может подойти. В 2026 есть CSS scroll-driven animations (MDN): анимация от скролла, не от таймера. Для новичка без кода это всё равно туториал – агентский путь быстрее.
Не делайте четыре промпта вместо атласа. Не делайте DIY remove background. Не делайте параллакс на каждом блоке – достаточно Hero. Если хотите вайбкодить сайты шире – практика на курсе Make.com и вайбкодинга.
Что дальше после локального preview
- Сохраните папку Hero в репозитории – не только скриншот.
- Вставьте блок на money-page и снова пройдите чеклист на телефоне.
- При смене оффера генерируйте новый атлас, а не «дорисовывайте» чужие слои.
- Держите рядом DESIGN.md: стиль до анимации, параллакс после.
- Следующий визуальный слой – мудборд или MCP-картинки, не случайный Pinterest.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Опора на источники: README и boilerplate PARALAXIMUS (GitHub Horosheff/paralaximus-agent, script.js с prefers-reduced-motion), WCAG 2.3.3 / web.dev Reduce Motion, MDN CSS scroll-driven animations; частотность «параллакс» / «эффект параллакса» / «как сделать эффект параллакса» – по Яндекс Вордстат на 14.07.2026.
Частые вопросы
Как сделать эффект параллакса без кода?
Поставьте PARALAXIMUS в Cursor, подключите MCP для атласа и снятия фона, вызовите /paralaximus с брифом оффера. Агент соберёт слои и локальный index.html – вам останется открыть preview и пройти чеклист читаемости.
Нужен ли MCP для параллакса в Cursor?
Да: gpt-image-2 делает один 2K-атлас, recraft_remove_background чистит альфу при косяке. Без MCP агент не из чего собрать согласованные слои.
Чем PARALAXIMUS отличается от обычной генерации картинок?
Обычная генерация даёт один баннер. PARALAXIMUS требует атлас 2×2, режет слои, собирает Hero со scroll/mouse и учитывает prefers-reduced-motion. Это сцена, а не «ещё один JPG».
Можно ли вставить параллакс Hero в WordPress или Tilda?
Да, как HTML/CSS/JS-блок после локальной проверки на 127.0.0.1:8123. Затем перенесите слои и разметку в тему или Zero Block. Не копируйте код до теста Reduce Motion и телефона.
Сколько слоёв достаточно новичку?
Четыре из атласа 2×2 – рабочий минимум: фон, far, near-рамка, главный объект. Не добавляйте пятый «для красоты» в первый вечер.
Почему от параллакса может тошнить и что делать?
WCAG 2.3.3 относит parallax scrolling к анимациям с вестибулярным риском. Сделайте сдвиг subtle, проверьте «уменьшить движение» и не гоните эффект на всю страницу – достаточно Hero.
