Issue: Horizontal scrolling effect with Skrollr

Question

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

Answer 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