javascript - 我需要有人来 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% 的视口(viewport)高度。

换句话说，我们不希望幻灯片 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%);"
>

现在每张幻灯片都会在滚动到下一张之前保持固定一段时间。