Front End, Programming

jQuery background panning in 10 lines of code

$('.panbg').mousemove(function(e){
 //Let's find the midpoints of the screen
 var midpointX = $(window).width()/2
 var midpointY = $(window).height()/2
 //Now the pointer's deviation as a percentage.
 var mousePosX = ((e.pageX-midpointX)/$(window).width())*100;
 var mousePosY = ((e.pageY-midpointY)/$(window).height())*100;
 //Let's dilute it by a factor of 40
 var xPos = mousePosX/40 + 50;
 var yPos = mousePosY/40 + 50;
 //Finally, let's move the background 🙂
 $('.panbg').css('backgroundPosition', xPos+'% '+ yPos+'%');
});
Standard