Простой и быстрый способ реализации эффекта горизонатльного параллакса на jQuery

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

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

 

Сцена:

<div id="scene">
<span class="layer_1"></span>
<span class="layer_2"></span>
<!-- ... -->
<span class="layer_N"></span>
</div>

 

CSS:

#scene {
width: 100%;
position: relative;
height: 200px;
}
#scene > span {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%
}
/* далее задаём фон для каждого из элементов сцены */
#scene > span.layer_N {
background: url(i/N.png) no-repeat 50% 100%;
}

 

JS:

$("*").mousemove(function(e) {
 var p = $("html").width()/2 - e.pageX;
 $("#scene .layer_1").css("background-position", -p/40+"px 100%");
 $("#scene .layer_2").css("background-position", p/30+"px 100%");
/* ... */
$("#scene .layer_N").css("background-position", p/5+"px 100%");
});
×
Предложите тему или интересную задачу для следующей статьи:
×

Ждем входящих данных...