Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead?
If you'd like to see the code, you can check it out here.
var x=0,
y=0,
rateX=0,
rateY=0,
maxspeed=10;
var container = $('.container');
var w = container.width() / 2;
var h = container.height() / 2;
var center = {
x: container.offset().left + container.width() / 2,
y: container.offset().top + container.height() / 2
};
container.on('mousemove', function(e){
var offsetX = e.pageX - center.x;
var offsetY = e.pageY - center.y;
rateX = -offsetX / w;
rateY = -offsetY / h;
});
container.hover(
function(){
var scroller = $(this).data('scroller');
if (!scroller) {
scroller = setInterval( moveContent, 30 );
$(this).data('scroller', scroller);
}
},
function(){
var scroller = $(this).data('scroller');
if (scroller) {
clearInterval( scroller );
$(this).data('scroller', null);
}
}
);
function moveContent(){
x += maxspeed * rateX;
y += maxspeed * rateY;
var newpos = 'translate('+x+'px, '+y+'px)',
transform = '-webkit-transform' || '-moz-transform' || '-ms-transform' || '-o-transform' || 'transform',
content = $('.content');
content.css(transform ,newpos);
}