Clever Geek Handbook

Problem: horizontal scrolling effect with Skrollr

I want to create a horizontal skrollr driven animation. Scrolling down, my page elements should move from left to right of my container.

Assuming my elements are the same width, I set the scroll data from 100% to 0% and it works.

But what if my images have different widths? I also want to keep the animation of the opacity, which will create a fade-out effect.

Here is the 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 script

+3


source to share


2 answers


Just set the width to 100% and keep the images inside:

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


Here's a demo in script

+1


source


I don't see how the problem will be of different widths. You can set the full width to 100% and overflow: hidden; or use jQuery to test the best way to fit an image in a container.



0


source






More articles:


All Articles