暂停。我基本上需要使用 skrollr.js 在我拥有的包含图像的 div 上暂停。我知道这可能并不难,但我似乎做对了。那么有人可以简单地解释一下如何实现这一目标吗?
<div> Something </div>
<div> <img> </div> <-----div to pause on for a little while
<div> Something else </div>
最佳答案
取自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%);"
>
现在每张幻灯片都会在滚动到下一张之前保持固定一段时间。
关于javascript - 我需要有人来 ELI5 这个 Skrollr.js 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27337205/