Question

在过去使用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>

干杯！

Answer 1

更改

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

到

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

其中100是任意限制值。 Updated demo

滚动时旋转图像

1 个答案: