CSS3 Transformation pendant le défilement

Quelqu'un connais un bon tutoriel pour y parvenir? (comme on le voit ici: http://www.contrastrebellion.com/)
J'ai regardé le code utilisé sur ce site et de trouver qu'il est très difficile de sortir de ce dont j'ai besoin.

Beaucoup apprécié,
Grâce

Edit: vu ici: http://playgroundinc.com/

Ce que je veux réaliser:

Pour faire pivoter une image png que j'ai faites défiler vers le bas et de la vitesse de rotation pour correspondre à la vitesse de défilement.

site intéressant.

OriginalL'auteur malicedix | 2012-02-02

  1. 5

    Cela devrait vous aider à aller dans la bonne direction : http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/ .

    Ici, vous allez :

    Pour l'animation de la rotation de défilement .

    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});
});
    Merci, je vais regarder à travers. Je ne sais pas si va directement à atteindre ce que je veux parce que je veux juste faire tourner un png que j'ai faites défiler vers le bas et de la vitesse pour correspondre à la vitesse de défilement, plutôt que de déplacer les calques des images pour obtenir un effet de parallaxe.
    Mise à jour de la réponse avec un violon , il n'est pas parfait, mais il vous donne les notions de base.
    Incroyable, je vous remercie beaucoup!
    Serait-il possible de faire toujours le bon sens lorsque vous faites défiler vers le haut?
    yep , j'avais une question à poser à travailler bien 🙂 jsfiddle.net/EnSkJ/5

    OriginalL'auteur Infra Stank

  2. 2

    Tout d'abord, jetez un oeil à ce site et profiter de l'expérience. Je pense que vous avez demandé pour une telle expérience dans votre projet.
    À la fin de cette page, vous verrez un plugin jquery pour mettre en œuvre que dans votre projet(site).
    L'espoir de résoudre votre problème.

    OriginalL'auteur mukilane

  3. 0

    Vous pouvez bien sûr utiliser d'une manière simple comme Infra Puait la réponse de. Toutefois, si vous avez besoin d'une plus chose de complexe à "animer" essayer jQuery Transe. C'est un approfondie solution pour ce problème. Vous pouvez modifier presque tout basé sur le courant de défilement offset (même CSS3-Transforme et autres choses de ce genre).

    Dans votre cas, essayez quelque chose comme ceci:

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

    Démo

    BTW: Si vous aimez les choses douces, vous pouvez inclure TweenLite avec ses feuilles de style CSS du Plugin.

    OriginalL'auteur yckart