CSS3 Преобразование при прокрутке

Question

Кто-нибудь знает хороший учебник для достижения этой цели? (как видно здесь: http://www.contrastrebellion.com/) Я посмотрел на код, используемый на этом сайте, и обнаружил, что неловко вытащить то, что мне нужно.

высоко ценится, Спасибо

Редактировать: Также видно здесь: http://playgroundinc.com/

Чего я хочу достичь:

Для поворота png при прокрутке вниз и скорости вращения в соответствии со скоростью прокрутки.

Answer 1

Это должно привести вас в правильном направлении: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/.

Вот, пожалуйста:

Для анимации вращения на свитке.

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

Код:

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

Прежде всего, посмотрите на этот сайт и наслаждайтесь опытом. Я думаю, что вы попросили такой опыт в вашем проекте. В конце этой страницы вы увидите плагин jquery для реализации этого в вашем проекте (сайте). Надеюсь, это решит вашу проблему.

Answer 3

Конечно, вы можете использовать простой способ, такой как Ответ Infra Stank . Однако, если вам нужна более сложная вещь, чтобы "оживить" , попробуйте jQuery Transe . Это тщательное решение именно для этой проблемы. Вы можете изменить почти все что угодно, основываясь на текущем смещении прокрутки (даже CSS3-Transforms и тому подобное).

В вашем случае попробуйте что-то вроде этого:

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

Демо

Кстати: если вам нравятся гладкие вещи, вы можете включить TweenLite с его CSS-плагином.