问题：使用Skrollr进行水平滚动效果

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

假设我的元素具有相同的宽度，我将滚动数据从100％设置为0％并且它可以工作。

但是，如果我的图像有不同的宽度呢？ 此外，我想保留不透明度动画，以创建这种淡入淡出效果。

这是HTML代码：

而CSS：

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

这是小提琴演示

Answer 1

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

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

这是小提琴演示

Answer 2

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