Паралакс привязанный к мышке. Картинка движется даже при выходе за блок?

Question

[Даня Квинов]

У меня паралакс работает даже когда я вышел за пределы блока. Как обездвиживать картинку при выходе на другой блок, тоесть когда мышка не находиться на блоке с background?!

<div class="background"></div>

.background {
	position: absolute;
	width: 100%;
	height: 100vh;
	background-size: 130% 130%;
	background-repeat: no-repeat;
	background-image: url(../img/background.jpg);
}

$(document).mousemove(function(e) {
    var x = (e.pageX * -1 / 5), y = (e.pageY * -1 / 5);
    $('.background').css('background-position', x + 'px ' + y + 'px');
});

Answer 1

[lamer350]

$(document).mousemove(function(e) {
Как бы прочитав просто код можно понять что вы отслеживаете перемещения по документу, замените document на идентификатор вашего блока.

Comments

[lamer350]

Даня Квинов, ничего, но JS не такой и сложный (в данном случае jquery), все человеческим языком написано. Главное прежде чем задавать вопросы - старайтесь хоть 10 минут прежде чем писать вопрос ;) Нужно развивать именно мышление, как видите ничего сложного в этом нет.

[Даня Квинов]

lamer350, странно,но не работает) Вроде должно :/

[lamer350]

Даня Квинов, посмотрите ошибку в консоли, наверняка что то не так сделали, возможно кавычки забыли или еще чего

[Даня Квинов]

lamer350, в консоли ошибок нету. Просто не работает паралакс

[Даня Квинов]

lamer350, я нашёл причину. У меня поверх фона лежит блок с текстом. Я привязал функцию к блоку с текстом. Всё работает, спасибо!

Answer 2

[Антон Усачев]

Можно привязаться с границам блока, а не page. Например, через clientX и getBoundingClientRect.

Answer 3

[RAX7]

$('.background').mousemove(function(e) {
    var x = (e.pageX * -1 / 5), y = (e.pageY * -1 / 5);
    $(this).css('background-position', x + 'px ' + y + 'px');
});

Comments

[Даня Квинов]

Странно,но не работает

[RAX7]

Даня Квинов, https://jsfiddle.net/ny254jas/

[Антон Усачев]

Даня Квинов,

$('.background').each(function () {
	var $block = $(this);

	$block.on('mousemove', function (e) {
		var x = (e.pageX * -1 / 5),
			y = (e.pageY * -1 / 5);
		$(this).css('background-position', x + 'px ' + y + 'px');
	});
});

[Даня Квинов]

RAX7, я нашёл причину. У меня поверх фона лежит блок с текстом. Я привязал функцию к блоку с текстом. Всё работает, спасибо!