The code provided demonstrates how to use CSS Transforms Matrix for changing the position of a background layer. It is important to ensure that the image remains centered during this transformation, as adjusting the right and left positions alone will not achieve the desired effect.
To implement this effect, you can create a layer with absolute positioning that covers the entire screen with some margin, while maintaining a low z-index as a background element. By utilizing the css transform property, you can shift the position of this layer based on mouse movement.
var maxMove = 10;
var d = $(window);
var bg = $("#bg");
bg.width(d.width()+maxMove*2).height(d.height()+maxMove*2).css('top','-' + maxMove + 'px').css('left','-' + maxMove + 'px');
$(document).mousemove(function(event) {
var xPos = event.pageX;
var yPos = event.pageY;
var w = d.width();
var h = d.height();
var xShift = ((w/2 - xPos)/w*2)*maxMove;
var yShift = ((h/2 - yPos)/h*2)*maxMove;
$("#log").text(xShift);
bg.css('transform','matrix(1, 0, 0, 1, ' + xShift + ', ' + yShift + ')');
});
Remember to include the necessary CSS styles:
#bg{
position:absolute;
background:url(http://lorempixel.com/output/city-q-c-1861-1370-1.jpg) center center no-repeat;
z-index:-1;
}
body{
padding:0;
margin:0;
overflow:hidden;
}
For more information, refer to this detailed tutorial and live demo.
Learn more about Css Transforms Matrix from this resource here.