jquery - 图像与暂停重叠 - skrollr

Question

你可以在这里看到一个 example (我想要实现但根本没有完成的接近方法)

这是对我要实现的目标的解释:

1. 查看图片
2. 向下滚动但仍会看到图像几秒钟(可能只有 2 秒)
3. 然后用户会看到下方的图像与静态图像重叠。
4. 再次:查看图片 > 向下滚动并仍然看到图片，2 秒后 > 然后下方的图片与之前的图片重叠。
5. 重复等等...

我一直在阅读文档，但不是很了解。有帮助吗？

这是标记:

<div data-0="transform:translate(0,0%);" data-1200p="transform:translate(0,-100%);">
    <div class="img-box">
        <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800">
    </div>
</div>

<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="img-box">
        <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800">
    </div>
</div>

<div data-_box-100p="transform:translate(0,100%);" data-_box-200p="transform:translate(0,0%);">
    <div class="img-box">
        <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800">
    </div>
</div>

我正在使用 skrollr plugin

Answer 1

在 dektop 上使用 window.scrollTo(0, top) 设置顶部偏移量，以便在循环滚动的情况下更新内部状态。

skrollr.init({
    easing: {
      //your code
    },
    render: function(data) {
        //Loop back to top 
        if(data.curTop === data.maxTop) {
            this.setScrollTop(0, true); 
              //will return first image when you reached to last
        }
    }
});

skrollr 将跳转到新位置而无需任何类型的转换。默认情况下，全局 smoothScrolling 设置适用。