Skrollr:当滚动位置在最后一个关键帧之后时传递函数
Skrollr: pass a function when the scroll position is after the last keyframe
Skrollr 是一个很棒的插件,有很多选择,但我真的无法理解当滚动位置在最后一个关键帧之后时是否有某种传递函数的方法。例如,看看这个小提琴。
滚动前 100 个像素时,scrollable-between
类会更改scrollable-after
。以类似的方式,我想传递一个函数(例如:当滚动位置在最后一个关键帧之后时做一些事情(。
您将如何实现这一目标?
您需要
使用render
选项。如下所示:
var box = $('#box'),
boxDone = false;
skrollr.init({
forceHeight: false,
smoothScrolling: false,
render: function() {
if ( box.hasClass('skrollable-after') ) {
if ( ! boxDone ) {
boxDone = true;
// do stuff
}
} else if ( boxDone ) {
boxDone = false;
}
}
});
您不一定必须拥有 boxDone
变量,但它可以防止它在发生这种情况时多次运行。您也可以通过不重置该变量来使其仅发生一次。
小提琴
我可能还应该提到,你会希望确保你在那里做的任何事情都应该运行得非常快,否则你就有可能减慢一切移动的平稳程度。您可以使用setTimeout
来解决这个问题,但我还没有对此进行任何测试。
相关文章:
- 关键帧之间的css3动画延迟
- 访问css3动画的关键帧
- 当用户滚动到页面的某个部分时,如何触发关键帧
- 动态关键帧插入在 IE 或 Firefox 上不起作用
- WebRTC流在第一帧之后冻结
- CSS3卡翻转带关键帧不工作
- 一种读取或更改CSS动画关键帧的方法
- Skrollr:当滚动位置在最后一个关键帧之后时传递函数
- 替换对象数组中的关键帧
- 如何在Javascript中更改关键帧状态
- CSS - 在关键帧中触发悬停
- 多次单击时运行关键帧动画
- CSS3 关键帧动画是否比属性过渡更平滑?
- 使用关键帧图像旋转器时,图像不会在两个块之间同步协调
- CSS关键帧过渡的最佳方法
- CSS 关键帧动画的随机“起点”
- 为什么单击时的关键帧动画只触发一次
- CSS3 关键帧不起作用
- 使用 JQuery 事件检测特定的 CSS 关键帧动画
- 多次使用 javascript 触发 CSS3 关键帧