javascript - 如何在滚动条上实现旋转背景

Question

伙计们，我想做一个演示设计 this我很困惑如何实现这一目标。我应该选择视差滚动还是更喜欢 skrollr 或 scrollmagic 或只是带有少量 jquery 代码的简单 css？建议实现此目的的最简单方法。谢谢:)

Answer 1

这是工作示例；

HTML

 <div class="rotate"></div>

CSS

body{
    height: 1000px;
    background: yellow;
}

.rotate{
    background: url("http://i.imgur.com/zZ3fMuh.png");
    width: 101px;
    height: 102px;
    position: fixed;
}

Js

$(function() {
    var rotation = 0, 
        scrollLoc = $(document).scrollTop();
    $(window).scroll(function() {
        var newLoc = $(document).scrollTop();
        var diff = scrollLoc - newLoc;
        rotation += diff, scrollLoc = newLoc;
        var rotationStr = "rotate(" + rotation + "deg)";
        $(".rotate").css({
            "-webkit-transform": rotationStr,
            "-moz-transform": rotationStr,
            "transform": rotationStr
        });
    });
})