Футер слоями — футер выходит при прокрутке с параллаксом
Когда страница доходит до конца, футер выходит слоями, и у каждого слоя своя скорость. Синяя панель чуть обгоняет страницу, футер с логотипом движется медленнее, а фото под ними почти стоит на месте. Получается глубокий параллакс. Чистый JavaScript без библиотек.
Вставьте код в чат ИИ-агента и напишите: «Сделай мне такой эффект на сайте». Инструкция для агента уже внутри.
Что это за эффект
Футер появляется не одним куском, а слоями, и у каждого слоя своя скорость. Последний блок страницы — синяя панель с большим меню — немного обгоняет страницу, а у самого конца приподнимается ещё. Под ней лежит большая фотография: она заходит под панель и движется гораздо медленнее страницы, поэтому кажется, что её открывают. Сам футер на фото — логотип, дата и мелкие ссылки — тоже движется медленнее страницы, но быстрее фото: он выплывает из-под панели и встаёт на открытой части фото. Из-за разницы скоростей и получается глубина.
Идея взята с футера azure.sa.
Где использовать
- Футер сайта: эффектная точка в конце страницы.
- Конец длинного раздела: блок с контактами или призывом.
- Лендинг: финальный экран с логотипом и фото бренда.
Как добавить на сайт
Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и подставит ваши ссылки и фото. Ваши настройки сохранятся.
Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.
<footer data-footer-reveal>
<div data-footer-panel>…большое меню…</div>
<div data-footer-bottom>
<img data-footer-photo src="desert.jpg" alt="">
<div data-footer-logo>логотип, дата, ссылки</div>
</div>
</footer>
createFooterReveal(document.querySelector('[data-footer-reveal]'), { lag: 0.08, photo: 0.6 });
Нижнюю часть футера лучше сделать высотой с экран: тогда в самом конце фото заполняет всё, что открывает панель.
Настройки
- Скорость панели — насколько панель обгоняет страницу.
- Подъём в конце — насколько панель приподнимается у самого конца.
- Параллакс фото — насколько медленнее страницы движется фото.
- Параллакс логотипа — насколько медленнее страницы движутся логотип и тексты на фото.
Доступность и производительность
Если в системе включено «Уменьшить движение», футер сразу стоит в конечном виде, без движения. При прокрутке меняются только transform слоёв и clip-path футера, раз за кадр, а когда прокрутка стоит, скрипт не работает. Футер может закрывать страницу или блок с собственной прокруткой: скрипт сам находит, в чём он прокручивается.