javascript - Skrollr - 暂停滚动时有关数据属性的问题

标签 javascript parallax skrollr

github 上 skrollr 的 pausing.html 示例中有一些代码在文档中根本没有解释。例如:

<div data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%)" data-_box-100p="" data-_box-200p="transform:translate(0,-100%)">

data-100p 属性是什么?文档中没有提到

另外 data-_box-100p=""是一个 ,我不明白它控制的是什么……暂停?在单独的 html 注释中,它暗示暂停的持续时间由常量“框”设置。所以这对 data-_box 有意义,但我不知道属性的其余部分(在一种情况下为 100p=""和

我正在尝试堆叠多个部分,每个部分都会因动画而暂停,但我在控制 skrollr 的暂停功能所涉及的逻辑方面遇到了问题

最佳答案

百分比偏移:p

偏移量,后面加“p”表示百分比偏移量。例如:data-100p = 向下滚动 100% 的视口(viewport)。

常量

Offset 可以用 skrollr 世界中的一个常量来表示。并且请注意常量的名称需要追加下划线前缀。

skrollr.init({
    constants:{
        box: 50
    }
});

所以……

data-_box equals to data-50
data-_box-100p eqauls to data-150p
data-_box-200p equals to data-250p

希望对您有所帮助。

关于javascript - Skrollr - 暂停滚动时有关数据属性的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20510538/

相关文章:

html - 在不改变原始宽度的情况下将 div 放置在视口(viewport)之外。使用 Skrollr 插件。

javascript - 我的代码只能运行一次

android - ViewPagerIndicator 不允许在 ViewPager 上设置背景资源

javascript - 视差不适用于 Rails

javascript - 如何获得视差的核心部分 - 这就是诀窍 - 工作?

android - 如何在 fragment android中实现视差滚动

wordpress - wp_enqueue_script 正确完成,现在如何初始化/调用脚本?

javascript - 带有关闭选项的粘性框

javascript - AngularJS : watching Service properties

javascript - innerHTML 不适用于 IE 中的 <datalist> HTML5 元素