Как на модных лендингах
Параллакс — это эффект, который создаёт иллюзию глубины. Например, когда вы едете в поезде и смотрите в окно, столбы проносятся мимо вас быстро, деревья и дома — со средней скоростью, а горы на фоне почти статичны. Вот эта разная скорость перемещения объектов на разной глубине и есть параллакс.
В вебе параллакс стал моден в 2010-х: обычно для этого брали фоновую картинку и скроллили её медленнее, чем контент на переднем плане. Это чисто визуальный эффект, никакого смысла в нём нет. Сегодня мы сделаем то же самое, причём двумя способами.
Простой способ — параллакс в шапке сайта
Самый простой способ что-то добавить на страницу — использовать готовое решение. В нашем случае мы будем использовать простой скрипт parallax.js — автор выложил исходный код на Гитхаб и объяснил, как им пользоваться.
Скачиваем оптимизированную минимальную версию parallax.min.js и подключаем через тег script:
<script src="parallax.min.js"></script>
Ещё нам понадобится jQuery — без него скрипт работать не будет. Также мы скачали картинку с сервиса Unsplash, чтобы использовать её для фона.
Чтобы добавить эффект на сайт, нам теперь достаточно пометить блок с картинкой, которая останется на месте. Для этого картинке добавляем свойство data-parallax="scroll», а остальное сделает подключённый скрипт. Чтобы было что прокручивать ниже, добавим на страницу текст из статьи про то, как работает алгоритм автомобильного навигатора.
Читайте комментарии в коде и смотрите результат на нашем тестовом сервере:
index.html
Style.css
Варварский способ — настройка стилей вручную
CSS поддерживает ещё один способ создать такой эффект — зафиксировать изображение и не дать его скроллить. Для этого есть свойство background-attachment:fixed — то есть фоновая картинка намертво вклеивается в свои координаты и никуда не двигается ни при каком скролле.
Общая идея такая:
- Добавляем два блока — один будет с зафиксированной картинкой, второй с текстом. Но пока что не кладём картинку внутрь первого блока, он должен быть пустым.
- Блоку для картинки присваиваем отдельный класс CSS. Блок всё ещё пустой.
- В присвоенный класс добавляем свойство background-image, в которое прописываем путь до нужной нам картинки.
- С помощью магии CSS делаем так, чтобы блок занимал какую-то высоту и ширину, чтобы сквозь него просвечивала нужная картинка.
- Запрещаем картинке двигаться с места и подгоняем её масштаб под размер блока.
- Для текстового блока указываем, что его высота должна равняться высоте блока.
В итоге у нас получится два новых стиля:
Добавим на ту же страницу в блок «content» новый раздел и карту с автомобильным маршрутом из статьи:
Видно, что всё работает, но карта видна не полностью. Это особенность работы с параллаксом — в погоне за красотой мы пожертвовали информативностью. По этой причине картинки для параллакса специально выбирают такие, чтобы если что обрезалось — то и ничего страшного.
