2

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

JB.
  • 893
  • 3
  • 16
  • 29

2 Answers2

1

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

jessegavin
  • 74,067
  • 28
  • 136
  • 164
0

This jQuery plugin might be useful.

no.good.at.coding
  • 20,221
  • 2
  • 60
  • 51
  • None of those examples work in Firefox 4, and the page is riddled with script errors. –  Mar 28 '11 at 01:45
  • I have similar issues in FF3.6. Thats good guidance though, if I can figure out how to line it up with the speed of the parallax – JB. Mar 28 '11 at 02:49