Разберем тему несложного скрипта движения фона, либо чего угодно от движения мыши.
Двигающийся фон
Делаем фон, желательно на всю ширину экрана для наглядности.
<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 — половина ширины и половина высоты объекта.
Пример
