期待在滚动时​​来回旋转图像

Question

想要在滚动时将图像顺时针旋转180度，然后当您向另一个方向滚动备份时，它将逆时针旋转180度。

这家伙做到了，但它是连续的。我正在寻找它以180度单向停止或锁定，然后在滚动或返回到0时另一个180.所以基本上它指向你正在滚动的方向。默认情况下，它会从向下指向开始。

Rotation Reference

$(function() {
     var $plane = $('.plane'); // Cache your elements!

     $(window).scroll(function() {
         if ($(this).scrollTop() > 10) {
             $plane.css({transform: 'rotate('+ window.pageYOffset%180 +'deg)'});
         } elseif ($(this).scrollTop() < 10); {
             $plane.css({transform: 'rotate('+ window.pageYOffset%-180 +'deg)'});
         }
     });

});

Answer 1

这个在FF和Chrome上适用于我：

$(function() {

  var $plane = $('.plane'); // Cache your elements!

  $(window).scroll(function() {  
      $plane.css({transform: 'rotate('+ (180*window.pageYOffset/(document.body.clientHeight - window.innerHeight)) +'deg)'}); 
  });

});

当你向页面的末端前进时，图标从0旋转到180，并在你返回时回到零。