How to move CSS background based on cursor/finger position without using background-position property? - css

Question

I'm working on a small app where the user move the background with his mouse or his finger on the screen.
You can find a demo here: http://kaleidoscope-experiment.herokuapp.com/
The background-position is defined by the position of the cursor/finger using this kind of code:
// mobile
position = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';
// desktop
position = e.pageX + 'px ' + e.pageY + 'px';
However, I have significant lags on mobile and tablet and the background is "clipping".
Do you know if there is any alternative to background-position (transform?), to move the background based on the cursor/mouse position?

Answer 1

If you want to roll your own just use a combination of the jQuery mousemove function in combination with CSS3 transforms. Something along the lines of this:
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log( "<div>" + msg + "</div>" );
$("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)');
});
Here is the reference fiddle that i got from stackoverflow
http://jsfiddle.net/ZmZhw/
There are number of js plugin that are available which will give u some smooth transition and performance also.