Что такое параллакс и как его сделать

Parallax

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

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

Параллакс – это визуальный эффект, который проявляется исключительно при скролле. Если страничку не скроллить, то, соответственно, вы ничего не увидите. Функция параллакса заключается в отделении фона от других элементов, таким образом, происходит визуализация данного эффекта. Он достигается с помощью нескольких слоев, “накладывая” друг на друга.

Как его сделать?

Эффекта параллакса можно достичь несколькими способами.

Самый простой способ, который можно сделать, это использовать css-свойство background-attachment: fixed;

Это свойство показывает, будет ли прокручиваться фоновое изображение вместе с содержимым или нет. Т.е при прокрутке страницы у нас текст будет прокручиваться, а сама картинка будет оставаться на месте, что визуально будет созвадавать эффект параллакса.

Подпишитесь на авторский телеграм-канал про предпринимательство в России.

Давайте разбираться, как оно работает.

Для начала создадим html разметку.

<section><span>Scroll Down </span></section>
<section class="fixed one"></section>
<section><span> Keep Scrolling Down</span> </section>
<section class="fixed two"></section>
<section><span>Scroll Down A Little More</span></section>
<section class="fixed three"></section>
<section><span>The End </span></section>

Разметку мы сделали, после можно переходить к css стилям, здесь задаем минимальные стили для <section>

section {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

Как видите у нас для section class="fixed" заданы разные дополнительные классы. Это сделано для того, чтобы можно было для каждой section задать свою картинку через css.

Вот как это выглядит:

section.one {
background-image: url('https://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_cDEviqY.jpg');
}
section.two {
background-image: url('https://www.planwallpaper.com/static/images/Nature-Wallpapers-6_J0BmGvg.jpg');
}
section.three {
background-image: url('https://www.planwallpaper.com/static/images/3.jpg');
}

Картинки вы можете брать с любого сервиса онлайн. Удобнее загрузить их себе на сервер, и использовать с него, так как если сервис перестанет работать или закроется, то у вас они перестанут отображаться. Я использовал в качестве примера, поэтому взял с сервиса онлайн.

Вот что у нас получилось в итоге здесь.

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

Следующий способ создания параллакс эффетка – с помощью javascript и различных библиотек.

Примеры различных эффектов вы можете посмотреть по ссылкам ниже:
www.streamlineicons.com – при медленном скролле иконки двигаются с разной скоростью;
www.streamlineicons.com – фиксирован фон и исчезновение центрального текста и его появления, при прокрутке в пол экрана;
stephen.band/jparallax – при попадании мышки на блок все элементы подстраиваются в направлении движения самой мышки;
www.alquimiawrg.com – эффект такой же, как описан в примере выше;
www.alquimiawrg.com – эффект приближения элементов на первом экране при скролле;
benthebodyguard.com – ну и завершим примеры очень крутым параллаксом, в какой-то мере приближенным к игре. P.s. Сам несколько раз прокручивал вверх вниз 🙂

И таких примеров может быть большое количество. Я показал разные варианты.

Так как же достичь данных эффектов?

В большинстве случаев используется библиотеки, например, как эта – parallax.js

В работе с библиотеками особо проблем и знаний не нужно. Скачиваете архив файлов библиотеки, подключаете все необходимые файлы в свой проект и прописываете строчки кода для создания эффекта и работы данной библиотеки.

Ну что ж на данном этапе и остановимся. Спасибо за уделённое время.

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

Удачи вам в изучении!

telegram
Обратная связь
Свяжитесь с нами
Реквизиты

Фактический адрес: г. Москва, шоссе Энтузиастов, дом 56, строение 26, офис 304

Юридический адрес: 115191, г. Москва, 4-й Рощинский проезд д.7/16