通过滚动动画jquery卷轴

Question

我正在开发一个滚动应用程序-并且所请求的功能之一是在用户滚动时动画化jquery卷轴-

我试图触发播放-并停止帧上的功能-并将其链接到scrollTop-但它无能为力。

http://jsfiddle.net/dxf17mbn/

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的链接。

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

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