スクロール時に要素を180度回転する

Question

ユーザーがWebページを下にスクロールしたときに画像を180度回転させようとしています。回転はビューポートで画像が表示されている間に行われ、ユーザーがスクロールして元の位置に戻す必要があります。

私はそれを大部分は機能させましたが、回転が一見無作為に180度以下の値で停止することがあります。私はその理由を把握して確認してください画像は常にあなたが本当にスクロールに基づくパーセントと最もあなたがスクロールすることができますを行う必要があります180

var iconRotate = $('.icon-rotate img'); 
 
if (iconRotate.length != 0) { 
 
\t $(window).scroll(function() { 
 
\t \t var page = window.pageYOffset, 
 
\t \t inner = window.innerHeight, 
 
\t \t result = (180 * page/(inner/3)); 
 

 
\t \t if (result < 180) { 
 
     console.log(result); 
 
\t \t \t iconRotate.css({transform: 'rotate(-' + result + 'deg)'}); 
 
\t \t } 
 
\t }); 
 
}

.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) { 
 
\t $(window).scroll(function() { 
 
\t \t var scroll = $(window).scrollTop(), 
 
\t \t maxScroll = $(document).height()-$(window).height(); 
 
\t \t iconRotate.css({transform: 'rotate(-' + (180 * scroll/maxScroll) + 'deg)'}); 
 
\t }); 
 
}

.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>