Question

你可以在这里看到一个example（我想要实现但不完整的接近方法）

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

查看图片
向下滚动但仍然可以看到图像几秒钟（可能只有2秒）
然后，用户会看到下面的图像与静态图像重叠。
再次：查看图片＆gt;向下滚动并仍然看到图像，2秒后＆gt;然后下面的图像与前一个图像重叠。
重复等......

我一直在阅读文档，但不太了解它。有什么帮助吗？

这是标记：

<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设置适用。

Answer 2

你的第二张幻灯片不是按你想要的方式表现吗？

看看这个simple parallax scrolling tutorial，它可能会帮助您更好地理解Skrollr设置。

另请参阅Skrollr.js infographics，这是一种更直观的方式，可以看到不同的数据属性如何影响时间和动画。

Answer 3

这是一个有效的演示：

http://dinhquangtrung.net/demo/skrollr/Pausing.htm

<div 
data-100p="transform:translate(0,0%);" 
class="skrollable skrollable-between" 
style="-webkit-transform: translate(0px, 0%);">
    <div class="img-box" style="position: absolute; overflow: hidden;">
        <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;">
    </div>
</div>

<div 
data-0="transform:translate(0,100%);"
data-100p="transform:translate(0,100%);"  
data-200p="transform:translate(0,0%)" 
class="skrollable skrollable-between" 
style="-webkit-transform: translate(0px, 100%);">
    <div class="img-box" style="position: absolute; overflow: hidden;">
        <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;">
    </div>
</div>

<div 
data-0="transform:translate(0,100%);"
data-300p="transform:translate(0,100%);"  
data-400p="transform:translate(0,0%)" 
class="skrollable skrollable-before" 
style="-webkit-transform: translate(0px, 100%);">
    <div class="img-box" style="position: absolute; overflow: hidden;">
        <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;">
    </div>
</div>

<div 
data-0="transform:translate(0,100%);"
data-500p="transform:translate(0,100%);"  
data-600p="transform:translate(0,0%)" 
class="skrollable skrollable-before" 
style="-webkit-transform: translate(0px, 100%);">
    <div class="img-box" style="position: absolute; overflow: hidden;">
        <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;">
    </div>
</div>

如果您不想阅读文档，我可以解释一下这个问题：

<div 
data-0="transform:translate(0,100%);" // when top = 0, translate the image position by 100% down.
data-100p="transform:translate(0,100%);"  // when top = 100, still in the position translated 100% down.
data-200p="transform:translate(0,0%)" // when top = 200, move position to origin position.

与其他图片相同，只有第一张图片是特殊的，因为它不需要移动到任何地方。

图像与暂停重叠 - skrollr

3 个答案: