Panning fullscreen image with jquery, while remain centered

Question

The fullscreen background is centered with

background: url(image) no-repeat center center;

Now I want the background image to move slightly whenever the user moves the mouse. I've come across several ways / plugins to do this, but not quite as I wanted so I chose to do it like this (which I also found somewhere):

$("body").bind('mousemove', function(e){
    var ypos=(e.pageY-100)/12 + 10;
    var xpos=(e.pageX-100)/18 + 10;
    $(this).css({backgroundPosition: xpos * (-1) + 'px ' + ypos * (-1) + 'px' });
});

The different values (/12, +10) are just values I arbitrarly chose because they gave me the result I was looking for - not sure if it's the right way to do. Anyway, the problem now is that when the page loads from scratch (without moving the mouse) everything looks fine (images centered).

If the script posted above is enabled and you move the mouse the background image "jumps" somewhere (according to the position values), so it shows from the very top left of the image which it shouldn't.

Unfortunately I can't code myself (just edit some basic stuff) and always was bad at math. This obviously is "just" a math problem, but can anyone help me figuring out what I would have to change, so the background image basically always is centered, but moves only slightly 50px (or whatever) in all directions?

Basically something like this http://manos.malihu.gr/tuts/jquery_image_panning_liquid.html, but not with an actual image but css / background only.

Answer 1

Posting the code, that I've cooked up quickly, in the answers section to maintain readability. This might solve your issue indirectly.

    $(function(){
        var mousex = mousey = null;
        $('body').mousemove(function(ev){
           if(mousex === null || mousey === null){
              //get initial x/y position for mouse cursor
              mousex = ev.pageX;
              mousey = ev.pageY;
           }

           window.clearTimeout(window.mouse_timeout);

           window.mouse_timeout = window.setTimeout(function(){
              console.log('mouse moved', ev.pageX - mousex, ev.pageY - mousey);

              /* now that you've the absolute position of the mouse and delta x/y here, you can move your background accordingly */

              //update the variables to the latest picket position of the mouse
              mousex = ev.pageX;
              mousey = ev.pageY;
           }, 10)
        });
     });

---

Update

jsfiddle This code marks the initial mouse position as center reference point and calculates mouse movement with reference to that point later on.

Markup

<div id="outer_container">
    <div id="imagePan">
        <div class="container">
            <div id="mov">
                <img src="http://i.imgur.com/92Z5zCM.jpg" class="panning" />
            </div>
        </div>
    </div>
</div>

CSS

html, body{ height: 100%; }
body{ margin: 0; padding: 0; background: #eee; }
#outer_container{ position: relative; margin: auto; padding: 4px; border: 8px solid #dadada; height: 90%; width: 80%; background: #CDD7E0}
#imagePan{ position: relative; overflow: hidden; cursor: crosshair; height: 100%; width: 100%; }
#imagePan .container{ position: relative; left: 0; }
#mov{ margin: -51px -391px 0 }

Javascript

     var originX = originY = xUnit = yUnit = dX = dY = mov = null;
     $(window).load(function () {
        mov = $('#mov');
        initMarginL = parseInt(mov.css('margin-left'));
        initMarginT = parseInt(mov.css('margin-top'));

        $('#outer_container').mousemove(function (ev) {
           if (originX === null || originY === null) {
              originX = ev.pageX;
              originY = ev.pageY;

              xUnit = parseFloat((Math.max(originX, $(window).width()) / $(window).width()).toFixed(2));
              yUnit = parseFloat((Math.max(originY, $(window).height()) / $(window).height()).toFixed(2));
           }

           var dX = originX - ev.pageX;
           var dY = originY - ev.pageY;

           mov.css({
              marginLeft: initMarginL + (dX * xUnit),
              marginTop: initMarginT + (dY * yUnit)
           });
        });
     });

Answer 2

Since "center center" is obviously the same as "50% 50%" I think I just found out the answer! :)

$('body').mousemove(function(e){
  var mousePosX = 50 + (e.pageX/$(window).width())*10;
  var mousePosY = 50 + (e.pageY/$(window).height())*5;
  $(this).css('backgroundPosition', mousePosX + '% ' +  mousePosY + '%');
});

Still moves too fast with smaller resolutions (than 1920) but that aside it works.