Движение фона от мыши

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

Двигающийся фон

Делаем фон, желательно на всю ширину экрана для наглядности.

<div id="move-bg">
</div>

Свойства блока с фоном следующие

#move-bg {
    background-image: url(/wp-content/uploads/2018/08/21546.jpg);
    min-height: 600px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    width: 100%;
    padding: 100px 0;
}

Скрипт движения фона

$(document).ready(function() { 
 
 // Движение фона от мышки   
   
$( document ).on( 'mousemove', function( e ) {
            var amountMovedX = 60 * ( (e.pageX + 1) / $( document ).width() ) - 60;
            var amountMovedY = 60 * ( (e.pageY + 1) / $( window ).height() ) - 100;

            $( '#move-bg' ).css( 'background-position', amountMovedX + 'px ' + amountMovedY + 'px' );
} );   

});

Первая цифра в расчете 60 — интенсивность движения. Последние цифры с минусом — компенсация фона слева и сверху, чтобы фон оставался за пределами экрана (настраивается индивидуально).

Двигающийся объект

Добавим сверху фона объект с меньшей интенсивностью движения, создавая эффект глубины.

<div id="move-bg">
<img id="move-object" src="https://land.opttour.ru/wp-content/uploads/2017/06/Sfera.png">
</div>

Свойства объекта-изображения

#move-object {
    position: absolute;
    left: 50%;
    top: 50%;  
}

Скрипт движения объекта (вписываем в ту же конструкцию $(document).ready(function())

$( document ).on( 'mousemove', function( e ) {
            var amountMovedX = 200 - 30 * ( (e.pageX + 1) / $( document ).width() );
            var amountMovedY = 165 - 30 * ( (e.pageY + 1) / $( window ).height() );

            $( '#move-object' ).css( {'margin-left': '-' + amountMovedX + 'px', 'margin-top' : '-' + amountMovedY + 'px' });
} );

В данном случае скрипт немного изменен: т.к. объект изначально отодвинут слева и сверху на 50%, то его необходимо центрировать. Для этого указаны первые значения — 200, 165 — половина ширины и половина высоты объекта.

Пример

Еще один вариант отличной реализации

С регулировкой коэффициента смещения у элемента. У объекта должен быть класс parallax и прописан атрибут data-offset.

<div class="scene">
  <div data-offset="90" class="clouds parallax"></div>
  <div data-offset="30" class="trees parallax"></div>
  <div data-offset="20" class="grass parallax"></div>
  <div data-offset="50" class="buildings parallax"></div>
</div>

$(window).on('mousemove', function(e) {
	var w = $(window).width();
	var h = $(window).height();
	var offsetX = 0.5 - e.pageX / w;
	var offsetY = 0.5 - e.pageY / h;

	$(".parallax").each(function(i, el) {
		var offset = parseInt($(el).data('offset'));
		var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";

		$(el).css({
			'-webkit-transform': translate,
			'transform': translate,
			'moz-transform': translate
		});
	});
});

Также для плавности можно прописать у .parallax стиль:

.parallax {
    transition: all 0.1s ease;
    -o-transition: all 0.1s;
    -webkit-transition: all 0.1s ease 0s;
}

[site-socialshare]