javascript - 希望在滚动时来回旋转图像

Question

希望在滚动时将图像沿一个方向顺时针旋转 180 度，然后当您向后滚动到另一个方向时，它将逆时针旋转 180 度。

这家伙做到了，而且是持续不断的。当您滚动或返回到 0 时，我希望它能够以一种方式停止或锁定在 180 度，然后以另一种方式停止或锁定 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 度；当您返回时，图标会旋转回零。