图像与暂停重叠 - skrollr

时间:2014-02-13 23:00:45

标签: jquery html css

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

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

  1. 查看图片
  2. 向下滚动但仍然可以看到图像几秒钟(可能只有2秒)
  3. 然后,用户会看到下面的图像与静态图像重叠。
  4. 再次:查看图片>向下滚动并仍然看到图像,2秒后>然后下面的图像与前一个图像重叠。
  5. 重复等......
  6. 我一直在阅读文档,但不太了解它。有什么帮助吗?

    这是标记:

    <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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

这是一个有效的演示:

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.

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