Динамичный фон с эффектом параллакса на JS

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

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

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

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

Шаг 1. HTML

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

<div id="simple3D">
<div class="dot"></div>
<div class="kinoco"></div>
<div class="star"></div>
</div>

</div>

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

Динамичный фон с эффектом параллакса для сайта

Шаг 2. CSS

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

#simple3D {
position: absolute;
z-index: 1;
width: 100%;
height: 900px;
}
#simple3D div {
min-height: 1100px;
width: 120%;
}
#simple3D div.dot {
background: url(../images/dot2.png);
}
#simple3D div.kinoco {
background: url(../images/kinoco.png);
}
#simple3D div.star {
background: url(../images/star.png);
}

#simple3D {

position: absolute;

z-index: 1;

width: 100%;

height: 900px;

}

#simple3D div {

min-height: 1100px;

width: 120%;

}

#simple3D div.dot {

background: url(../images/dot2.png);

}

#simple3D div.kinoco {

background: url(../images/kinoco.png);

}

#simple3D div.star {

background: url(../images/star.png);

}

Шаг 3. JS

Последним, но не менее важным элементом, будет реализация самого эффекта, и анимации при движении курсора, для этого нам понадобится немного магии и следующий код:

<script>
$("#simple3D").simple3D({
moveX:3, // 1 - 5
moveY:3, // 1 - 5
bgImage:true,
targetAll:true,
reverseX: true,
reverseY: true
});
</script>

$("#simple3D").simple3D({

moveX:3, // 1 - 5

moveY:3, // 1 - 5

bgImage:true,

targetAll:true,

reverseX: true,

reverseY: true

});

</script>

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

Динамичный фон с эффектом параллакса на JS

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

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

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

Не пропусти

Опрос блога

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

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

Динамичный фон с эффектом параллакса на JS

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

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

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

Зайти

Не пропусти

Опрос блога

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

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