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

Question

希望在滚动时顺时针将图像旋转 180 度，然后在向另一个方向滚动备份时它会逆时针旋转 180 度。

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

$(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，当您返回时又回到零。

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

Looking to rotate an image back and forth upon scrolling

javascript

scroll

css-animations

jquery-animate