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

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

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

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

Шаг 1. HTML

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

<body class="b-page b-page_holiday-face b-page_holiday-bg_2">
<div data-id="1" class="holiday-face holiday-face_parallax">
<div data-offset="50" class="holiday-face__item holiday-face__item_5"></div>
<div data-offset="70" class="holiday-face__item holiday-face__item_4"></div>
<div data-offset="30" class="holiday-face__item holiday-face__item_3"></div>
<div data-offset="20" class="holiday-face__item holiday-face__item_2"></div>
<div data-offset="50" class="holiday-face__item holiday-face__item_1"></div>
</div>

</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 {
background-image: url("/euKxNRPgI8_zZrSmcEBzKb7_0.jpg");
}
.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 {
background-image: url("/wKRfV_hlcMYTwL0tLdTfkfD4s.jpg");
}
.holiday-face_parallax .holiday-face__item_4 {
background-image: url("/ryCqbMR3r4SS8ndABXAOfQ-0I.png");
}
.holiday-face_parallax .holiday-face__item_3 {
background-image: url("/bH6gkCAQB_X8LNVg3ilwwhG40.png");
}
.holiday-face_parallax .holiday-face__item_2 {
background-image: url("/iFWNN9Fl1VGxk8SI9LGljdhUQ.png");
}
.holiday-face_parallax .holiday-face__item_1 {
background-image: url("/RVWSpixldgXfBaQy0T5Y3vaUE.png");
}
.b-page_holiday-bg_2 .holiday-face-words {
background-image: url("/S5_Vzf8MO5aH8C-FJY_GwZCBU.svg");
}

.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 {

}

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

Шаг 3. JS

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

$(window).on('mousemove', function(e) {
var w = $(window).width();
var h = $(window).height();
var offsetX = 0.5 - e.pageX / w;
var offsetY = 0.5 - e.pageY / h;

$(".holiday-face__item").each(function(i, el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";

$(el).css({
'-webkit-transform': translate,
'transform': translate,
'moz-transform': translate
});
});
});

$(window).on('mousemove', function(e) {

var w = $(window).width();

var h = $(window).height();

var offsetX = 0.5 - e.pageX / w;

var offsetY = 0.5 - e.pageY / h;

$(".holiday-face__item").each(function(i, el) {

var offset = parseInt($(el).data('offset'));

var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";

$(el).css({

'-webkit-transform': translate,

'transform': translate,

'moz-transform': translate

});

В результате мы получаем интересную картинку. Которая будет отзывчивой на движение курсора.

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Интересно:

Опубликовал admin 02.03.2015 в 10:30, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

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

Читайте также:

Интересно:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

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

Читайте также:

Интересно:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи