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

时间:2013-12-11 04:30:23

标签: 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的暂停功能时遇到的逻辑有问题

1 个答案:

答案 0 :(得分:5)

百分比偏移:p

附加“p”的偏移号表示偏移百分比。例如:data-100p =向下滚动100%的视口。

<强>常量

偏移量可以通过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

希望这有用。