/ Scripts & jquery / Движение фона от мыши

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

HIT

18.06.2017

4489

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

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

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

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

Пример

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

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Движение фона от мыши
Вывод города по IP
Рекомендации для васВывод города по IPOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.