Animate jquery reel via scroll

依然范特西╮ 提交于 2019-12-24 06:11:30

问题


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

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

});

回答1:


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

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.

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



来源:https://stackoverflow.com/questions/56728902/animate-jquery-reel-via-scroll

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!