Панорамирование фонового изображения во всех направлениях при наведении курсора с помощью Javascript

Question

Я пытаюсь добавить эффект панорамирования к фоновому изображению на странице, изображение достаточно большое 1800 x 1067, поэтому в основном будет больше, чем окно. Я хочу панорамировать фон во всех направлениях, когда мышь достигает конца окна. только я нашел код Javascript, который выполняет панорамирование, но только по горизонтали, попытался поиграться с ним, чтобы включить вертикальное панорамирование. не работал.

вот код на JSFiddle: http://jsfiddle.net/v662t/

// HTML

<div id="pageBg">
</div>

// CSS

#pageBg {
    background: url(images/pageBg.jpg) no-repeat 0 0 scroll;
    background-size: cover;
    height: auto;
    left: 0;
    min-height: 768px;
    min-width: 1024px;
    overflow: hidden;
    position: fixed;   
    top: 0;
    width: 100%;
}

// Javascript

$(document).ready(function(){
   $('#pageBg').mousemove(function(e){
      var mousePosX = (e.pageX/$(window).width())*100;
      $('#pageBg').css('background-position-x', mousePosX +'%');
   }); 
});

Answer 1

Удалить background-size: cover и добавьте несколько строк JavaScript для mousePosY:

var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');

проверьте рабочую скрипку здесь: http://jsfiddle.net/georgedyer/XWnUA/2/

Answer 2

Я отвечаю на комментарий о панорамировании по краям, чтобы включить лучшее форматирование.

Это зависит от того , как именно вы хотите, чтобы панорамирование по краям работало. Будет ли изображение двигаться только в том случае, если мышь движется по краю или даже когда мышь неподвижна, но зависает над краем?

В первом случае: вы можете использовать тот же код скрипки и просто проверить, если mousePosX или же mousePosY < 10 или> 90 (или любой процент, который вы хотите определить как ребра). Если это так, то вместо того, чтобы перемещать изображение в процент от окна, вы должны переместить его в процент от края.

Так как это может оказаться слишком чувствительным, так что вы могли бы пойти на альтернативу просто двигаться при наведении, в этом случае вы будете использовать mouseEnter а также mouseLeave события вместо этого, и просто начать интервал на mouseEnter (с помощью var interval = setInterval(moveImage,250);), который перемещает фоновое изображение на пиксель, затем очищает этот интервал (clearInterval(interval);) на mouseLeave,

Я оставлю это вам, чтобы отредактировать скрипку самостоятельно и посмотреть, сможете ли вы заставить ее работать так, как вы хотите.