通过滚动动画 jquery 卷轴
Animate jquery reel via scroll
我正在开发滚动应用程序 - 请求的功能之一是在用户滚动时为 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');
}
});
});
在提出有关特定插件的问题时,请务必提及或什至向他们的 API 提供 link。
只需将触发的事件从 play
更改为 stepRight
就会有所不同。您希望同时使用 stepRight
和 stepLeft
,具体取决于用户是向上还是向下滚动。
我还会从 scroll
回调中删除 frameChange
侦听器,因为您最终会为此事件添加大量重复的侦听器。
我正在开发滚动应用程序 - 请求的功能之一是在用户滚动时为 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');
}
});
});
在提出有关特定插件的问题时,请务必提及或什至向他们的 API 提供 link。
只需将触发的事件从 play
更改为 stepRight
就会有所不同。您希望同时使用 stepRight
和 stepLeft
,具体取决于用户是向上还是向下滚动。
我还会从 scroll
回调中删除 frameChange
侦听器,因为您最终会为此事件添加大量重复的侦听器。