通过滚动动画 jquery 卷轴

Question

我正在开发滚动应用程序 - 请求的功能之一是在用户滚动时为 jquery 卷轴设置动画 --

我尝试触发帧上的播放 - 和停止功能 - link 它到 scrollTop - 但它没有做任何事情。

var threesixty = $('#image').reel({
  image: 'http://test.vostrel.net/jquery.reel/example/object-movie-clockwise-sprite/f1-reel.jpg',
  speed: 0,
  frames: 35,
  cw: true,
  throwable: 1.2
});



console.log("threesixty", threesixty);

var $win = $(window);
$win.on('scroll', function() {
  var top = $win.scrollTop() / 3;

  console.log("top", top)

  var fraction = top / 3;

  $('#image')
    .trigger('play')
    .bind('frameChange', function() {
        console.log("frame change--")
      if ($(this).reel('frame') == 47) {
        $(this).trigger('stop');
      }
    });

});

Answer 1

在提出有关特定插件的问题时，请务必提及或什至向他们的 API 提供 link。

只需将触发的事件从 play 更改为 stepRight 就会有所不同。您希望同时使用 stepRight 和 stepLeft，具体取决于用户是向上还是向下滚动。

我还会从 scroll 回调中删除 frameChange 侦听器，因为您最终会为此事件添加大量重复的侦听器。

通过滚动动画 jquery 卷轴

Animate jquery reel via scroll

jquery

scroll

360-degrees