Question

Would it be possible to rotate an element on a website by scrolling?

The element should rotate to the right while scrollong down the page, and to the left while scrolling up.

The pace of the rotation should match the pace of the scrolling.

When no longer scrolling the element should rotate back to the the starting point.

Answer 1

I have been looking into the same thing and here is the info I have come across in hopes that you may find what you are looking for.

1) This could be achieved using jquery’s .scroll and some CSS3 transitions, however it is not widely supported yet. IE doesnt support it at all at the time of this writing so you would want to know your target audience. This could be done with some fixes and workarounds to get more support in different browsers but you are better off going with a different option, unless you really want that ‘Do It Yourself’ feel.

2) Like option 1 it would be using .scroll and calling to a rotation plugin (cause using the jquery’s rotators are not so smooth). If thats the route you would like to take, check this plugin out http://code.google.com/p/jqueryrotate/wiki/Examples

3) The way I would go is using one of the many parallax scrolling plugins that have rotation built in. Most of them have a graceful degradation implemented for those IE folk. Two of my favorites would be:
http://johnpolacek.github.com/scrollorama/
and
http://joelb.me/scrollpath/

Hope this points you in the right direction!