Настройка параллакс эффекта на сайте

22 января 11:47 2013 by Игорь Коваленко

Здравствуйте дорогие друзья. Недавно мне попался один заказчик, который захотел иметь дизайн с параллакс эффектом (jquery.parallax).

Если кто не знает, то:

jQuery.Parallax – это библиотека jQuery, с помощью которой можно создавать эффект 3D движения на сайте, то есть дизайн получается более динамичным и запоминающимся.

А слово Параллакс, в науке, означает изменение видимого положения тела относительно заднего фона в зависимости от положения наблюдателя.

Parallax эффект в природе
Отражение солнца в воде сдвинуто относительно столба, это и есть Параллакс в природе

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

Существует очень много разновидностей jQuery.parallax, но для моего макета нужен именно с эффектом горизонтального движения, когда разные части фона двигаются с разной скоростью, тем самым создавая эффект трёхмерности.

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

1. Принцип работы jQuery.Parallax

jParallax основан на перемещении слоёв, которые позиционируются абсолютно (position:absolute;), слои двигаются в ответ на перемещение мыши.

Основная фишка заключаться в том, что из-за разного размера слоёв, движения получаются с разной скоростью.

Пример параллакс эффекта:

А вот попроще пример с текстом:

2. Подключаем библиотеки и создаём базу для вывода

Для начала создайте два файла, в которых мы будем указывать оформление нашего параллакс эффекта — style.css и index.html.

Содержание index.html

[html]<link rel=»stylesheet» href=»style.css» />
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js»></script>
<script src=»jquery.parallax.js»></script>
<script>
jQuery(document).ready(function(){
jQuery(‘#parallax .parallax-layer’)
.parallax({
mouseport: jQuery(‘#parallax’)
});
});
</script>
</head>
<body>
<div class=»site_wrap»>
<div class=»parallax-viewport» id=»parallax»>

<!— слои parallax с разной шириной —>
<div class=»parallax-layer» style=»width:600px; height:300px;»>
<img src=»images/2.png» alt=»» />
</div>
<div class=»parallax-layer» style=»width:500px; height:280px;»>
<img src=»images/3.png» alt=»» style=»position:absolute; top:5px; left:-10;»/>
</div>
<div class=»parallax-layer» style=»width:400px; height:250px;»>
<img src=»images/4.png» alt=»» style=»position:absolute; top:12px; left:16;»/>
</div>

</div>
</div>[/html]

Как видите, мы подключили библиотеку jQuery с репозитория Гугла, затем сам скрипт jquery.parallax.js (скачать его можете тут или в конце статьи будет ссылка на архив с исходником). Далее мы подключаем обработчик, который фиксирует перемещение по обозначенным слоям.

К сведению, если вам нужна торцевая разделочная доска, то оформить свой заказ вы сможете на интернет-ресурсе etwood.ru. Уверен, вы останетесь довольны соотношением цена-качество!

Изображения (слои), поидеи должны быть разной ширины, чтобы перемещение было с разной скоростью, но можно сделать и с одинаковой шириной и изменять уже параметр width у каждого изображения в отдельности.
[sc name=»728 text» ]

Содержание Style.css

[css]
.parallax-viewport { /* Стили основного бокса */
width: 100%;
height: 20em;
background-image: url(«images/1.jpg»);
}
.parallax-viewport {
/* Тут не указана ширина, так как все слои в моём примере
имеют одинаковую width и height*/
position: relative;
overflow: hidden;
}
.parallax-layer {
/* Обязательное позиционирование для каждой картинки */
position: absolute;
}
.site_wrap {
max-width:48rem;
min-width:292px;
width:100%;
margin: 0px auto;
}[/css]

У нас слои разного размера и поэтому по ширине не будет чётких границ, чтобы сделать стиль отображения «из окна» (как в примере выше), надо обернуть дивы с картинками вот в такой класс:

[css].parallax-viewport
{position: relative; overflow: hidden; width:npx; height:npx;}[/css]

Мы указываем фиксированную ширину, высоту «окна» и обрезаем все части (overflow: hidden), которые выступают за грани нашего окна. Для наглядности я ещё оформил моё окно в рамку, простым бордером и отступом padding.

Итог

Вот в принципе и всё, настроить параллакс эффект очень просто. Скачать мои исходники второго примера вы можете по этой ссылке.

Библиотека jQuery.Parallax имеет очень много возможностей и вот такое смещение, только малая часть того, чего можно добиться с помощью этой замечательной библиотеки.

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

stephband.info/jparallax/demos
tntrailsandbyways.com — Красивое горизонтальное смещение с задержкой по времени;
www.thebeatlesrockband.com
www.housamz.com — точной такой же эффект, как мы с вами делали в этом уроке, только смещения по оси «y» нет. Чтобы отключить смещение по вертикали, в файле jquery.parallax.js измените параметр yparallax на false. Таким же макаром можно отключить и скроллинг по горизонтали.
Одна из разновидностей Параллакс эффекта, у меня на странице «Книги для вебмастера«. Если интерестно, то напишу как такое сделать.