CODEWITHSUNDEEP
javascriptrotationmouse-positionmouse-coordinatesparallax
JB.
JB.

Reputation: 913

Javascript rotate image with mouse coordinates

Im using a parallax effect that moves a ball according to the users mouse position (http://webdev.stephband.info/jparallax/index.html). I am trying to figure out a way that the ball will also rotate. So it would appear that as the user moves their mouse over the area, the ball rolls across the screen.

I have found some javascript examples that show how to rotate an item on mouse click, I am just not skiled enough in js to put it all together.

here is a Jsfiddle that shows an example:

jsFiddle

Upvotes: 2

Views: 1633

Answers (2)

jessegavin
jessegavin

Reputation: 75650

This is more tangential advice than an answer, but in order to make the rolling ball look realistic, make sure that it rotates at a rate that is consistent with the ball's circumference. Otherwise it will look fakey.

enter image description here

Upvotes: 1

no.good.at.coding
no.good.at.coding

Reputation: 20371

This jQuery plugin might be useful.

Upvotes: 0

Related Questions