Доброго времени суток. Продолжаю изучение jquery. Добрался до параллакса (или псевдопараллакса).
Затык у меня произошел при возврате объектов на родные места при отведении мыши.
Правильно ли я понимаю, что нужно в переменные сохранить изначальные позиции объектов, а при событии mouseleave присваивать текущим значениям позиции начальные значения.
Одна проблема, так как я новичек в этом деле, то прошу помощи в реализации. Или есть иной подход? Ссылка
https://ww.net.ru/test2/
<div class="bannerWrapper">
<div class="banner">
<div class="img4 item1"></div>
<div class="img4 item2"></div>
<div class="img4 item3"></div>
<div class="img4 item4"></div>
</div>
</div>
.bannerWrapper{
width: 100%;
height: 300px;
background-color: #9CCF14;
}
.banner{
text-align: center;
position: relative;
background-image: url('f.jpg');
margin: auto;
width: 1659px;
height: 300px;
overflow: hidden;
}
.img4 {
position: absolute;
display: block;
}
.item1 {
background-image: url('1.jpg');
left: 150px;
top: 70px;
width: 300px;
height: 300px;
background-repeat: no-repeat;
}
/*далее остальные item*/
$(document).ready(function() {
var banner = $(".banner");
var imgs = $(".img4");
// Вычисление перемещения
function moving (object, speed) {
banner.on('mousemove', function(event) {
var X = Math.floor((event.pageX)/speed-20) + "px";
object.css('transform', 'translateX('+X+')');
});
};
// Применение функции moving ко всем объектам
function moveAll (object) {
moving($(object[0]),12);
moving($(object[1]),22);
moving($(object[2]),8);
moving($(object[3]),10);
};
moveAll(imgs);
});