滾動時將元素旋轉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>