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

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

HIT

18.06.2017

1637

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

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

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

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

Пример

Поделится информацией с друзьями

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

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

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

Движение фона от мыши
URL, ссылки страниц, ЧПУ
Рекомендации для васURL, ссылки страниц, ЧПУOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.