Jquery - Animate Background position with easing

Question

I am trying to animate a background on mousemove with some easing using jquery animate. But cant figure out how to stop the queuing of the animation and have the animation "follow" the mouse around

HTML:

Animate Background<br />
<div id="animateme"></div>

JS:

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

    $(this).animate({
        'background-position-x': e.pageX,
        'background-position-y': e.pageY
    }, 100, 'swing');

});

I have set up a jsfiddle to hopefully show what i mean http://jsfiddle.net/KunZ4/1/

Hover over the top image and you can see the background animation follows the mouse. But i want to add some easing to this, so it follows the mouse a bit smoother.

Using jquery animation seems to queue, but i want the animation to kind of catch up to the mouse on a bit of a delay when mouse movement is stopped.

I am wanting to achieve this without the use of UI or Plugins.

Hopefully that makes some kind of sense

Yes - but i want the background to "catch up" to the mousemovement So there is a delay in the moving. — eleven11, Dec 27 '12 at 14:17
http://www.chromazone-imaging.co.uk/flashindex.html If you look at that website - Same type of effect but not jquery — eleven11, Dec 27 '12 at 14:33

score 4 · Accepted Answer · answered Dec 27 '12 at 16:27

4

I found something that worked for me, for anyone else looking for this

http://jsfiddle.net/KunZ4/6/

The easing can be adjusted by changing the duration

$.easing.smoothmove = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
 }; 


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

 $(this).animate({
   'background-position-x': e.pageX,
   'background-position-y': e.pageY
 }, {queue:false,duration:200,easing:'smoothmove'});

 });

Thanks for all the help

answered Dec 27 '12 at 16:27

eleven11

362
2
3
12

Is there a way to make the background go back to its original position after the mouse has stopped hovering the div? – Marco Ramirez Castro May 29 '16 at 02:06

score 0 · Answer 2 · answered Dec 27 '12 at 14:36

0

Try adding stop(true) before the .animate function:

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

    $(this).stop(true).animate({
        'background-position-x': e.pageX,
        'background-position-y': e.pageY
    }, 100, 'swing');

});

Fiddle: http://jsfiddle.net/maniator/KunZ4/4/

answered Dec 27 '12 at 14:36

Naftali

144,921
39
244
303

Yea - I tried that, but it doesn't really give a smooth effect when you move the mouse around fast. Appreciate the help though – eleven11 Dec 27 '12 at 14:39

score 0 · Answer 3 · answered Dec 20 '13 at 19:00

Developed, (when mouse moving in BODY): http://jsfiddle.net/hX22a/

$.easing.smoothmove = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
}; $("body").bind('mousemove', function(e){
$("#animateme").animate({
'background-position-x': e.pageX,
'background-position-y': e.pageY
}, {queue:false,duration:200,easing:'smoothmove'});
});

Jquery - Animate Background position with easing

3 Answers3