BackgroundImage следовать MouseCursor

Question

Я хочу, чтобы иметь эффект, как это: http://www.thepetedesign.com/demos/interactive_bg_demo.html

фоновое изображение должно следовать за курсором мыши. Есть ли простой способ сделать это, не взяв сценарий из примера?

Я уже пытался что-то вроде этого:

$('#outer').mousemove(function(e){ 
    var xwidth = e.pageX - this.offsetLeft; 
    var ywidth = e.pageX - this.offsetRight; 
    if (xwidth <= 1200) { 
     $('#bg').css({'right': xwidth});   
    } 

    if (ywidth >= 500) { 
     $('#bg').css({'left': ywidth});   
    } 

Answer 1

В примере, который вы опубликовали, используется матрица трансформаций CSS, чтобы изменить положение фонового слоя. Изображение должно быть центрировано, поэтому вы не можете перемещать его, изменив правое и левое положение фонового изображения.

Вы должны отобразить слой с абсолютным положением, покрывающим экран с пометкой, но с низким индексом z, чтобы служить фоном. На мыши сдвиньте положение слоя сдвига с помощью свойства css transform.

var maxMove = 10; 
var d = $(window); 
var bg = $("#bg"); 
bg.width(d.width()+maxMove*2).height(d.height()+maxMove*2).css('top','-' + maxMove + 'px').css('left','-' + maxMove + 'px'); 

$(window).mouseleave(function(){ 
    //bg.css('transform','matrix(1, 0, 0, 1, 0, 0)'); 
}); 

$(document).mousemove(function(event) { 
    var xPos = event.pageX; 
    var yPos = event.pageY; 

    var w = d.width(); 
    var h = d.height(); 

    var xShift = ((w/2 - xPos)/w*2)*maxMove; 
    var yShift = ((h/2 - yPos)/h*2)*maxMove; 

    $("#log").text(xShift); 
    bg.css('transform','matrix(1, 0, 0, 1, ' + xShift + ', ' + yShift + ')'); 

}); 

Конечно, не забывайте CSS:

#bg{ 
    position:absolute; 
    background:url(http://lorempixel.com/output/city-q-c-1861-1370-1.jpg) center center no-repeat; 
    z-index:-1; 
} 
body{ 
    padding:0; 
    margin:0; 
    overflow:hidden; 
} 

Заканчивать detailed tutorial и демо.

Читайте о Css Трансформации Матрица here

Answer 2

По только поиска в Интернете для того, что вы хотите достичь, первый результат привел к этой странице: http://jsfiddle.net/geekambassador/a6ekn/

bg.mousemove(function(event) { 
    var xPos = event.pageX; 
    TweenLite.to(bg, .5, {css:{backgroundPosition:xPos + "px"}}); 
}); 

Надеюсь, поможет.