Move bg-image with mouse from center (javaScript/jQuery/CSS)
I'm moving the body's background-position based on the position of the
mouse. But I need it to move a little differently, I want it to be so that
when the mouse is exactly in the center of the page, the background-image
is in exactly 'background-position: center;'
Here's the codepen: http://codepen.io/hellaFont/pen/IldnH
Here's my code:
$(window).on('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
var windW = $(window).width();
var windH = $(window).height();
var imgW = $("#hide").width();
var imgH = $("#hide").height();
numX = x/windW * 50 + imgW/3;
numY = y/windH * 50 + imgH/3;
$('body').css({
'background-position-x' : - numX,
'background-position-y' : - numY
});
});
No comments:
Post a Comment