Что такое 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. Если вам будет очень интересно, то в следующей статье мы сможем разобрать настройку библиотеки и пройдем все шаги создания с вами.

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

Привлечение клиентов с помощью интернет-маркетинга