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

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

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

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

<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 — половина ширины и половина высоты объекта.

Пример

Поделиться в соц. сетях: