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