Issue: Horizontal scrolling effect with 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.

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

Here's HTML code:

<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>

And the 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

回答1:

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; 
}

Here's a Demo in Fiddle

回答2:

I don't see how the different width would be a problem. You could set all width to 100% and overflow: hidden; or use jQuery to check the best way to fit the image in the container.