Анимация перехода между страницами — полосы закрывают экран

Что это за эффект

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

Переход скрывает момент загрузки и делает сайт цельным, как приложение. Попробуйте ссылки в правом верхнем углу примера: «Главная», «Работы», «Контакты».

Эффект сделан по мотивам перехода «Block Reveal Page Transition» от Codegrid. В оригинале это проект на Next.js с GSAP и плагином SplitText. Здесь всё сделано на встроенном в браузер Web Animations API и работает на любом сайте, даже на обычных HTML-страницах.

Где использовать

• Портфолио и сайты студий, где важно впечатление от каждого перехода.
• Лендинги из нескольких страниц, чтобы переходы выглядели как часть дизайна.
• Сайты брендов: название на шторке ещё раз напоминает, где находится посетитель.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам подключит скрипт ко всем страницам и подставит название вашего бренда. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт HTML-страницу с примером из трёх страниц. «Скопировать код» копирует стили и скрипт для вставки на сайт. Скрипт без зависимостей.

Подключите скрипт в общий шаблон, чтобы он был на каждой странице, а название бренда задайте у <body>:

<body data-transition-text="Tooolkit">

createPageTransition(document.body, { bands: 4, duration: 1000 });

Отдельная разметка не нужна: полосы и название скрипт рисует сам. Он перехватывает клики по ссылкам на страницы вашего же сайта: закрывает экран, переходит на новую страницу, и уже она открывается из-под полос. Внешние ссылки, ссылки в новой вкладке, якоря на той же странице и клики с зажатым Ctrl или Cmd работают как обычно.

Цвет полос задаёт CSS-переменная --transition-color, цвет названия — --transition-text.

Настройки

• Направление — полосы едут слева направо или колонны поднимаются снизу вверх.
• Полос — сколько полос закрывают экран.
• Длительность — сколько едет одна полоса.
• Задержка полос — насколько позже трогается каждая следующая полоса. При нуле экран закрывается одной шторкой.
• Название посередине — показывать ли название бренда, пока экран закрыт.

Доступность и производительность

Шторка скрыта от скринридеров, и пока она закрывает экран, клики сквозь неё не проходят. Если в системе включено «Уменьшить движение», страницы открываются сразу, без шторки. Двигается только transform, поэтому переход плавный и на слабых устройствах. Кнопка «Назад» в браузере работает как обычно, и страница не остаётся закрытой.

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

Это замедляет переходы? Немного: на переход уходит около двух секунд. Если это много для вашего сайта, уменьшите длительность и задержку полос.

Работает ли с React, Vue, Next.js? Да. В одностраничных приложениях вызывайте переход из своего роутера: сначала закрыть экран, затем сменить страницу, затем открыть. Агент сделает это сам, если попросить.

Нужен ли GSAP, как в оригинале? Нет. Анимации делает сам браузер через Web Animations API.