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

这里有一个在Fiddle中的演示

- Francesco Buonomo

Answer 1

只需将宽度设置为100％，并将图像包含在其中即可：

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

这里有一个在Fiddle上的演示

- Tasos

---

我指的是元素之间不同的宽度，就像这样：http://jsfiddle.net/09wyzte5/1/ - Francesco Buonomo

最好添加一些图片以了解您的意图。我认为您想要包含宽度。 - Tasos

如果我的一个元素具有不同的宽度，那么该元素将不会放置在其前面，而是重叠在其上，失去了我正在寻找的幻灯片效果。http://jsfiddle.net/09wyzte5/3/ - Francesco Buonomo

Answer 2

我不认为不同的宽度会是一个问题。您可以将所有宽度设置为100％并使用overflow: hidden; 或使用jQuery检查最佳方式来适应容器中的图像。

- Marcel

---

如果我的一个元素具有不同的宽度，那么该元素将不会放置在其前面，而是重叠在其上，失去了我正在寻找的幻灯片效果。http://jsfiddle.net/09wyzte5/1/ - Francesco Buonomo

如果它们的宽度都是100％，那么它们将填充容器。 - Marcel

问题在于skrollr插值看到每个div的100％宽度，将其放置在前一个div之后而不是重叠在前一个div上，您可以在此处查看。http://jsfiddle.net/09wyzte5/5/ - Francesco Buonomo

为什么你在使用垂直滚动条来进行水平滚动？抱歉，我刚意识到这个问题。 - Marcel

我知道Marcel，但我喜欢把生活搞得复杂一些 :) 我正在寻找解决方案，但我真的找不到。你能看到这个问题的解决方案吗？感谢您的考虑。 - Francesco Buonomo