0

I'm trying to create a jQuery script that changes background-position x px to the left or right according to mouse movements (starting from background-position:center).

Here's what I have so far: http://jsfiddle.net/multiformeingegno/KunZ4/530/

$("#salone").bind('mousemove', function (e) {

    $(this).css({
        backgroundPosition: e.pageX + 'px ' + e.pageY + 'px'
    });

});

Problem is it doesn't start from background-position:center and when I move the mouse the background-image starts from mouse position and reveals the white background. I'd like it to move from the center to the left/right according to mouse movements. And also adjust the speed of the background-position change (animate?).

MultiformeIngegno
  • 6,959
  • 15
  • 60
  • 119

1 Answers1

0

Just subtract the position you want to start from:

 backgroundPosition: (e.pageX-650) + 'px ' + (e.pageY-410) + 'px'

to change the speed adjust the factor for the mouse position:

 backgroundPosition: (e.pageX*2-650) + 'px ' + (e.pageY*2-410) + 'px'

Is double as fast.

http://jsfiddle.net/KunZ4/538/

For the calculation of the background center you could just take the image path, append it to an invisible image and get the width and height.

var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
scope = this;
bgImg.bind('load', function()
{
   scope.height = $(this).height();
   scope.width = $(this).width();
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);

var centerX = scope.width/2;
var centerY = scope.height/2;

No you can use centerX and centerY to center your image.

Took the center calculation from here: How do I get background image size in jQuery?

Community
  • 1
  • 1
RodrigoDela
  • 1,706
  • 12
  • 26
  • Yep I already use that temporarily but I'm sure there's a way to calculate the center of the image and then add or subtract px from it. – MultiformeIngegno Nov 25 '14 at 17:19
  • Ok works for the speed! Now with a function to calculate the center of the image (instead of manually setting the digits to start from) would be perfect – MultiformeIngegno Nov 25 '14 at 17:21
  • In the meanwhile I was trying to do the same thing and I adapted a function to get the image width from here http://stackoverflow.com/a/20756358/1342772 Here's the result: http://jsfiddle.net/multiformeingegno/8Lr8m7uy/ I don't know why it's not smooth.. doens't seem to grab the center – MultiformeIngegno Nov 25 '14 at 17:34
  • For me this works pretty good: http://jsfiddle.net/KunZ4/537/ It's the fiddle to the solution above. Or did I get you wrong? Edit: just removed the alert. – RodrigoDela Nov 25 '14 at 17:44
  • Doeesn't move at all to me :P – MultiformeIngegno Nov 25 '14 at 17:48
  • For me it does. Just updated it. Which browser are you using to test it? – RodrigoDela Nov 25 '14 at 17:49
  • Yes found the mistake. Firefox appends a %22 to the url it's a double quote. Try this: http://jsfiddle.net/KunZ4/538/ – RodrigoDela Nov 25 '14 at 17:53