@privat13

Как вернуть объекты после перемещения параллаксом?

Доброго времени суток. Продолжаю изучение 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);
});
  • Вопрос задан
  • 76 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы