我需要有人来ELI5这个Skrollr.js功能

Question

暂停。我基本上需要使用skrollr.js暂停我拥有的div，其中包含一个图像。我知道这可能并不困难，但我似乎无法做到这一点。那么有人可以简单解释如何实现这一目标吗？

<div> Something </div>
<div> <img> </div> <-----div to pause on for a little while
<div> Something else </div>

Answer 1

取自this教程。

暂停滚动动画

假设我们想要冻结每个幻灯片50％的视口高度。

换句话说，我们不希望幻灯片2和3移动一段时间，然后滚动到下一张幻灯片。

我们可以包含空数据属性来创建关键帧并更改动画偏移。

更新的数据属性是这样的：

<div id="slides"
data-0="transform:translate(0%,0%);"
data-50p=""
data-150p="transform:translate(0%,-50%);"
data-200p=""
data-300p="transform:translate(-50%,-50%);"
data-350p=""
data-450p="transform:translate(-50%,0%);"
>

现在每张幻灯片都会固定一段时间，然后滚动到下一张幻灯片。