Главная страница » jQuery » Потрясающий эффект параллакса для сайта на JS

Потрясающий эффект параллакса для сайта на JS

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

</div>

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

Потрясающий эффект параллакса для сайта на JS

Шаг 2. CSS

Для начала мы устанавливаем общие параметры для контейнера заливаем фон необходимым нам цветом и указываем интервалы трансформации, затем мы устанавливаем изображение, которое будет основой для нашей картины:

.b-page_holiday-face .holiday-face_parallax {

background-color: #3f2a20;

transform: translate3d(0px, 0px, 0px);

}

.b-page_holiday-bg_2 .holiday-face {

}

.holiday-face {

background: none no-repeat scroll center center / cover #3f2a20;

bottom: 0;

left: 0;

min-height: 540px;

min-width: 875px;

position: fixed;

right: 0;

top: 0;

z-index: -1;

}

.holiday-face_parallax .holiday-face__item_5 {

}

.holiday-face_parallax .holiday-face__item_4 {

}

.holiday-face_parallax .holiday-face__item_3 {

}

.holiday-face_parallax .holiday-face__item_2 {

}

.holiday-face_parallax .holiday-face__item_1 {

}

.b-page_holiday-bg_2 .holiday-face-words {

}

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