Плавная прокрутка страницы с эффектом параллаксаМы продолжаем рассказывать и показывать как реализовать замечательные эффекты с использованием параллакса. В сегодняшнем уроке речь пойдет именно о прокрутке с данным эффектом. Ранее мы не раз публиковали уроки посвященные данной теме, но сегодня мы хотели остановится на ней еще раз и рассказать как создать по настоящему плавную прокрутку с эффектом параллакса, которая будет сдвигать слайды по вертикали при прокрутке колесиком мыши. По умолчанию у нас будет три слайда.

 

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

Шаг 1. HTML

Для начала нам необходимо создать общий контейнер, который будет содержать в себе дочерние элементы, затем мы устанавливаем класс «background» — он будет отвечать за изображение, параметр «content-wrapper» будет содержать в себе текстовое описание, параметры к нему мы укажем в стилях.

Мы указали только одну разметку, в исходниках вы можете просмотреть остальные два слайда, и примеры их размещения на странице. Переходим к следующему шагу.

Плавная прокрутка страницы с эффектом параллакса

Шаг 2. CSS

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

Шаг 3. JS

Теперь нам необходимо оживить наш параллакс, а также привязать анимацию, мы указываем переменные, которые позволят нам создать данную анимацию при движении:

В результате мы получили отличный эффект параллакса при прокрутке станицы, слайды будут смещать друг друга плавной анимацией, что создаст эффект большего реализма.

Вот и все. Готово!