问题：使用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; 
}

Here's a Demo in Fiddle

Answer 1

只需将宽度设置为100％并将图片包含在：

中

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

Here's a Demo in Fiddle

Answer 2

我不知道不同的宽度会是一个什么问题。您可以将所有宽度设置为100％并溢出：隐藏;或使用jQuery检查将图像放入容器的最佳方法。