How to create animated element that follows browser like on http://metalab.co/projects/swivl/ ?
I tried looking at there html code but there is just a transition on the div that holds the ipad background image. I have been unable to figure out what css/ js is causing this effect making the ipad turn and follow the visitors mouse location ( left and right pan )
you can do this by setting the transform property of an element on mousemove.
Like so:
var $window = $(window),
$box = $('#box')
rotation = 0;
$window.on('mousemove', function(event){
rotation = (event.pageX/$window.width()*90) - 45;
$box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg)');
});
see the fiddle
it will work in newest chrome and ff. note that you may use browser prefixes for the transform attribute (-webkit-, -moz- ...). it depends on your supported browsers.