Rotating object to face mouse pointer on mousemove


(Jeroen) #1

I have an image (little airplane) and I want the plane to rotate facing mouse pointer. I found some scripts to do that but I can get it to work with Hype. I’m more a designer! Could someone help me rewrite the script for Hype.

This is the script:
var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];

$(document).mousemove(function(e){

var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]) )*(180/Math.PI);        

box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});    
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
box.css({ 'transform': 'rotate(' + angle + 'deg)'});

});

Example:
http://jsfiddle.net/opherv/ddGHz/

Thanks


#2

https://photics.com/free-template-tuesday-2-tumult-hype-looking/


(Jeroen) #3

OK, thanks for the link! I’m going to check it out


#5

Nice! Other Hype templates are also mentioned here…