滚动时将元素旋转180度

Question

当用户在网页上向下滚动时，我希望将图像旋转180度。 旋转应发生在视口中图像可见的时间，并且当用户向后滚动时，图像应旋转回到其原始位置。

我大部分时间都可以使用它，但有时旋转会以低于180度的看似随机值停止。 我不知道为什么，但要确保图像始终旋转到180。

 var iconRotate = $('.icon-rotate img'); if (iconRotate.length != 0) { $(window).scroll(function () { var page = window.pageYOffset, inner = window.innerHeight, result = (180 * page / (inner/3)); if (result < 180) { console.log(result); iconRotate.css({transform: 'rotate(-' + result + 'deg)'}); } }); } 

 .icon-rotate { width:300px; } img { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="icon-rotate"> <img src="http://68.media.tumblr.com/6324fd64b78c316379713480b8e44d29/tumblr_nd1rffWqEa1ryzl2ko1_1280.jpg" /> </div> 

Answer 1

您实际上应该基于滚动百分比，并且可以滚动最多。

 var iconRotate = $('.icon-rotate img'); if (iconRotate.length != 0) { $(window).scroll(function () { var scroll = $(window).scrollTop(), maxScroll = $(document).height()-$(window).height(); iconRotate.css({transform: 'rotate(-' + (180 * scroll/maxScroll) + 'deg)'}); }); } 

 .icon-rotate { width:300px; } img { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="icon-rotate"> <img src="http://68.media.tumblr.com/6324fd64b78c316379713480b8e44d29/tumblr_nd1rffWqEa1ryzl2ko1_1280.jpg" /> </div>