问题：使用Skrollr的水平滚动效果 [英] Issue: Horizontal scrolling effect with Skrollr

问题描述

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

I want to create an horizontal animation controlled by the skrollr. Scrolling down, the elements of my page have to move from left to right of my container.

假设我的元素具有相同的宽度，我设置

Assuming that my elements have all the same width, I set the scrolling data from 100% to 0% and it works.

但是，如果我的图片有不同的宽度，那么滚动的数据从100％到0％。
此外，我想保留创建这种淡入淡出效果的不透明度动画。

But what if my images have different widths? Also I want to preserve the opacity animation that create this fade-in fade-out effect.

以下是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

推荐答案

只要设置宽度为100％包含您的图片：

Just set the widths to 100% and contain your images within:

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

这篇关于问题：使用Skrollr的水平滚动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！