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

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

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

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

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

Шаг 1. HTML

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

</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);

}

Шаг 3. JS

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