Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2018, 23:40
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 46

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

https://cdn.rawgit.com/ViacheslavDem...130/index.html
Ответить с цитированием
  #2 (permalink)  
Старый 16.09.2018, 00:48
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,413

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

Последний раз редактировалось j0hnik, 16.09.2018 в 00:53.
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2018, 01:15
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 46

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

<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');

		});

});
Ответить с цитированием
  #4 (permalink)  
Старый 16.09.2018, 02:00
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 46

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

https://cdn.rawgit.com/ViacheslavDem...749/index.html
Ответить с цитированием
  #5 (permalink)  
Старый 16.09.2018, 02:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,413

$('.header__picture-back').css('background-position-x', moveX + 'px');
$('.header__picture-back').css('background-position-y', moveY + 'px');
Ответить с цитированием
  #6 (permalink)  
Старый 16.09.2018, 02:37
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 46

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сохранение данных после закрытия страницы HekracoB AJAX и COMET 12 02.01.2015 12:41
Как передать что-то после location.replace? Nominus umbra Общие вопросы Javascript 26 23.12.2009 21:50
Как вызвать событие после события определенного в onchange Наталья Events/DOM/Window 2 12.09.2009 13:51
Как запустить скрипт после отработки другого скрипта? roman2 Общие вопросы Javascript 2 10.08.2009 01:23
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11