问题:水平滚动效果与Skrollr

Question

我想创建一个由skrollr控制的水平动画。向下滚动，我的页面元素必须从我的容器的左边移动到右边。

假设我的元素都有相同的宽度，我设置滚动数据从100%到0%，它工作。

但是如果我的图像有不同的宽度呢?另外，我想保留创建渐入渐出效果的不透明度动画。

下面是HTML代码:

<div id="container">
    <div class="bg" style="background-color:red" 
        data-0="transform:translate3d(0%,0%,0); opacity:1"  
        data-5000="transform:translate3d(-100%,0%,0); opacity:0">
    </div>
    <div class="bg" style="background-color:green;" 
        data-0="transform:translate3d(100%,0%,0); opacity:0"    
        data-5000="transform:translate3d(0%,0%,0);opacity:1"
        data-10000="transform:translate3d(-100%,0%,0);opacity:0">
    </div>
    <div class="bg" style="background-color:orange" 
        data-5000="transform:translate3d(100%,0%,0); opacity:0"     
        data-10000="transform:translate3d(0%,0%,0); opacity:1">
    </div>
</div>

和CSS:

#container {
    background-color:black;
    width:500px;
    height:300px;
    overflow:hidden;
}
div {
    position:fixed;
}
.bg {
    width:500px; 
    height:300px; 
}

这是一个Demo在提琴

Answer 1

只需将宽度设置为100%，并将图像包含在:

#container {
    background-color:black;
    width:100%;   
    height:300px;
    overflow:hidden;
}
div {
   position:fixed;
}
.bg {
    width:100%; 
    height:300px; 
}

这是一个Demo在提琴

Answer 2

我看不出不同的宽度有什么问题。你可以设置所有宽度为100%和overflow: hidden;或者使用jQuery检查适合容器的图像的最佳方式。