理解滚动视差暂停代码

Question

我只是想在我的一个网站上使用scrollr。这是我第一次使用这个插件。我看到了这个例子。

基本上我感兴趣的是如何暂停 div 并显示动画。

所以暂停的div的html如下：

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

现在不太明白

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

的用法。

此处用于初始化此插件的 JavaScript：

skrollr.init({
        constants: {
            //fill the box for a "duration" of 150% of the viewport (pause for 150%)
            //adjust for shorter/longer pause
            box: '150p'
        }
    });

有人可以解释一下吗？

Answer 1

根据 documentation，以下行用值

box

初始化名为

150p

的常量变量：

skrollr.init({
  constants: {
    box: '150p'
  }
});

再次，文档提到

150p

是设置为反映视口百分比的偏移值。

鉴于变量

box

的值为

150p

，我们可以理解以下行：

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

...像这样：

data-150p-100p="" data-150p-200p="transform:translate(0,-100%)"

经过计算（减去

100p

和

200p

）后，可以归结为：

data-50p="" data--50p="transform:translate(0,-100%)"

插件将替换

_box

（变量必须以 _ 字符为前缀。再次检查 docs 以了解变量语法。） 替换为关联值 (150p) 并进行计算。

基本上，这都是关于古老的好建议：RTFM。