滚动时旋转图像

Question

after using stackoverflow for plenty of help in the past I have a problem which will probably be easy for someone to solve…

I'm trying to rotate a background image when the user scrolls down the page, I have managed to get this far (with help from someone else's question and some helpful answers) but I need to slow down the rotation as its to fast. As far as I can tell I need to do something with the window height and use this to slow the rotation.

Heres my JSFiddle of how far I've got.

If anyone could help me out I'd be very grateful, my skills aren't quite up to scratch.

My code…

$(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>

Cheers!

Answer 1

Change

var rotationStr = "rotate(" + rotation + "deg)";

to

var rotationStr = "rotate(" + rotation / 100 + "deg)";

where 100 is an arbitrary limiting value. Updated demo