jQuery 使用 CSS 变换滚动时如何旋转图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18540474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to rotate image when scrolling using CSS transform?
提问by cristiano matos
回答by jgauld
Try this fiddle:
试试这个小提琴：
It's not 100% accurate in working out full rotation, but I think that night be the fiddle environment.
进行完整旋转并不是 100% 准确，但我认为那天晚上是小提琴环境。
The code here:
这里的代码：
var $cog = $('#cog'),
$body = $(document.body),
bodyHeight = $body.height();
$(window).scroll(function () {
$cog.css({
'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
});
});
回答by Brandon Buck
Here's a simple jQuery example, check the modified JSFiddle:
这是一个简单的 jQuery 示例，检查修改后的 JSFiddle：
CSS will handle rotations > 360 and < 0 for me so I didn't even bother doing that and adjust the rotation value based on the distance scrolled. I didn't worry about trying to account for a full rotation either so that it better flowed with the speed and distance scrolled. This solution depends on jQuery but could easily be done without it.
CSS 将为我处理 > 360 和 < 0 的旋转，所以我什至没有打扰这样做并根据滚动距离调整旋转值。我也不担心尝试考虑完整的旋转，以便它随着滚动的速度和距离更好地流动。此解决方案依赖于 jQuery，但没有它也可以轻松完成。
$(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)";
$(".gear").css({
"-webkit-transform": rotationStr,
"-moz-transform": rotationStr,
"transform": rotationStr
});
});
})
回答by Juan Mendes
I started with OneOfOne's solution and added animations to it. Start the animation on the scrollevent, end it with the mouseup. http://jsfiddle.net/g3k6h/4/
我从 OneOfOne 的解决方案开始，并为它添加了动画。在scroll事件上开始动画，以mouseup. http://jsfiddle.net/g3k6h/4/
var rotation = 0;
var interval;
var gear = $('.gear');
function animate() {
gear.css('transform', 'rotate('+rotation+'deg)');
rotation += 10;
rotation %= 360;
}
function startAnim() {
if (!interval) {
interval = setInterval(animate, 100);
}
}
function stopAnim() {
clearInterval(interval);
interval = null;
}
$(document).scroll(startAnim).mouseup(stopAnim);
jamesgauld's answer is similar to mine except that the rotation amount is based on the scroll position, where mine just keeps rotating while you are scrolling, which is how I understood the question.
jamesgauld 的回答与我的相似，只是旋转量基于滚动位置，我的只是在滚动时保持旋转，这就是我对问题的理解。
回答by zedroid
You can achieve the same result, in a more simple way using DOM javascript, instead of jQuery. Give your image an id, and add the following javascript:
您可以使用 DOM javascript 而不是 jQuery 以更简单的方式实现相同的结果。给你的图片一个 id，然后添加以下 javascript：
<script>
window.onscroll = function() {scrollRotate()};<br/>
<br/>
function scrollRotate() {<br/>
var navimg = document.getElementById("navimg");<br/>
navimg.style.transform = "rotate("+ (window.pageYOffset/5) + "deg)"<br/>
}
</script>
Where it says "window.pageYOffset/5", you can lower the number (5) for a faster rotation, or make it higher for a slower rotation.
在它说“window.pageYOffset/5”的地方，您可以降低数字 (5) 以获得更快的旋转，或者将其设置得更高以获得更慢的旋转。
回答by OneOfOne
Something like this, jQuery should use the correct css3 prefix. http://jsfiddle.net/g3k6h/2/
像这样，jQuery 应该使用正确的 css3 前缀。 http://jsfiddle.net/g3k6h/2/
$(function() {
$('.gear').click(function() {
$(this).css('transform', 'rotate(30deg)');
});
});
