,

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
Подписаться на наш Telegram