CSS3 Transformation while scrolling

Question

Does anyone know of a good tutorial to achieve this? (as seen here: http://www.contrastrebellion.com/) I've looked at the code used on that site and finding it awkward to pull out what I need.

Much appreciated, Thanks

Edit: Also seen here: http://playgroundinc.com/

What I want to achieve:

To rotate a png as I scroll down and the speed of rotation to match the speed of scrolling.

Answer 1

This should get you going in the right direction : http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/ .

Here you go :

For animating the rotation on scroll .

http://jsfiddle.net/EnSkJ/2/

Code :

var sdegree = 0;

$(window).scroll(function() {

    sdegree ++ ;
    sdegree = sdegree + 3 ;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
});

Answer 2

You can of course use a simple way like Infra Stank's answer. However if you need a more complex thing to "animate" try jQuery Transe. It is a thorough solution for exactly this problem. You can change almost anything based on the current scroll offset (even CSS3-Transforms and suchlike).

In your case, try something like this:

$('img').transe({
    start: 0,
    end: 1600,
    css: 'transform',
    from: 'rotate(0deg)',
    to: 'rotate(360deg)'
});

Demo

BTW: If you like smooth things, you can include TweenLite with its CSS-Plugin.

Answer 3

First of all, have a look at this site and enjoy the experience. I think you asked for such an experience in your project. At the end of that page you will see a jquery plugin to implement that in your project(site). Hope it solves your problem.