Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как продолжить верстку после применения mousemove на фоне (https://javascript.ru/forum/dom-window/75244-kak-prodolzhit-verstku-posle-primeneniya-mousemove-na-fone.html)

DVV 15.09.2018 22:40

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

https://cdn.rawgit.com/ViacheslavDem...130/index.html

j0hnik 15.09.2018 23:48

так сделайте блок в котором она relative и меняйте при движении курсора background-position

DVV 16.09.2018 00:15

Да, вроде сделал.

<div class="wrap">
				<div class="header__picture-front">
					<div class="header__picture-back"></div>
				</div>
	</div>


.wrap {
	position: relative;
}
.header__picture-front {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: #FFF;
}

.header__picture-back {
	position: absolute;
	left: -5%;
	top: -5%;
	width: 110%;
	height: 110%;
	background-image: url("../img/bg/header-bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


$(document).ready(function() {
	
	let windowWidth = $(window).width();

		$('.header__picture-front').mousemove(function(e) {
			let moveX = (($(window).width() / 2) - e.pageX) * 0.1;
			let moveY = (($(window).height() / 2) - e.pageY) * 0.1;

				$('.header__picture-back').css('background-position', moveX + 'px');
				$('.header__picture-back').css('background-position', moveY + 'px');

		});

});

DVV 16.09.2018 01:00

Вроде, получилось. Только теперь изображение как-то не так двигается, только по горизонтали.

https://cdn.rawgit.com/ViacheslavDem...749/index.html

j0hnik 16.09.2018 01:08

$('.header__picture-back').css('background-position-x', moveX + 'px');
$('.header__picture-back').css('background-position-y', moveY + 'px');

DVV 16.09.2018 01:37

Блин, вот не хватает у меня пока еще опыта на такие мелкие, но важные детали. В очередной раз большое спасибо!!!


Часовой пояс GMT +3, время: 10:24.