-1

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 )

Rubytastic
  • 15,001
  • 18
  • 87
  • 175

1 Answers1

3

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.

Toni Feistauer
  • 411
  • 4
  • 10