滚动时旋转图像

在过去使用stackoverflow获得大量帮助后，我遇到了一个问题，可能很容易解决…

当用户向下滚动页面时，我试图旋转背景图像，我已经做到了这一点（在别人的问题和一些有用的答案的帮助下），但我需要放慢旋转速度，因为它太快了。据我所知，我需要对窗户的高度做点什么，并用它来减缓旋转。

这是我的JSFiddle关于我已经走了多远。

如果有人能帮我，我将不胜感激，因为我的技术还不完全达到标准。

我的代码…

$(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)";
    $(".circle").css({
        "-webkit-transform": rotationStr,
        "-moz-transform": rotationStr,
        "transform": rotationStr
    });
});
})

CSS：

.container {
width:960px;
margin: 0 auto;
}
.circleWrap {
margin: 0 auto;
width:960px;
position:relative;
}
.circleContainer {
width: 970px;
position:fixed;
overflow:visible;
z-index:-50;
}
.circle{
background:url('http://www.wearerevolting.co.uk/dev/spin/moodring-col.jpg') no-repeat center;
width: 1772px;
height: 1772px;
margin-left: -400px;
}
.text {
z-index:50;
position:absolute;
height:2000px;
width:960px;
border:#000 thick solid;
}

<div class="container">
    <div class="text">Content area</div>
</div>
<div class="circleWrap">
    <div class="circleContainer">
        <div class="circle"></div>
    </div>
</div>

干杯！