通过滚动动画jquery卷轴 [英] Animate jquery reel via scroll

问题描述

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

I am working on a scroll application - and one of the requested features is to animate the jquery reel - as the user scrolls --

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

I've tried to trigger the play - and stop feature on a frame - and link it to the scrollTop - but its not doing anything.

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');
      }
    });

});

推荐答案

在对特定插件提出疑问时，请务必提及，甚至提供指向其API的链接.

When making questions about specific plugins make sure to mention that or even provide a link to their API.

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

Simply changing the event been triggered from play to stepRight will make a difference. You want to use of both stepRight and stepLeft depending if the user is scrolling up or down.

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

I would also remove the frameChange listener from the scroll callback since you will endup adding a lot of duplicate listeners for this event.

这篇关于通过滚动动画jquery卷轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！