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

score 1 · Answer 1 · edited Jan 08 '15 at 16:43

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

edited Jan 08 '15 at 16:43

KyleMit

30,350
66
462
664

answered Aug 13 '14 at 14:47

Tasos

5,321
1
15
26

I'm referring to different widths between the elements like that: http://jsfiddle.net/09wyzte5/1/ – Francesco Buonomo Aug 13 '14 at 14:51
its better if you add some images to get and idea what you want. im under the impression you want to contain the widths. – Tasos Aug 13 '14 at 14:54
If one of my element have a different width that element will not placed after it's previous but overlaid to it, loosing the slideshow effect that I'm searching for. http://jsfiddle.net/09wyzte5/3/ – Francesco Buonomo Aug 13 '14 at 15:18

score 0 · Answer 2 · answered Aug 13 '14 at 14:49

0

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.

answered Aug 13 '14 at 14:49

Marcel

1,034
1
17
35

If one of my element have a different width that element will not placed after it's previous but overlaid to it, loosing the slideshow effect that I'm searching for. http://jsfiddle.net/09wyzte5/1/ – Francesco Buonomo Aug 13 '14 at 15:24
Not if they all have width 100%. Then they will fill the container. – Marcel Aug 13 '14 at 15:25
The problem is that the skrollr interpolation see the 100% of the width of each div and place it not after the previous div but overlaid to it as you can see here. http://jsfiddle.net/09wyzte5/5/ – Francesco Buonomo Aug 13 '14 at 15:37
Why are you using a vertical scrollbar for horizontal scrolling? Sorry just realized this. – Marcel Aug 13 '14 at 16:07
personal choice. I would like to realize the animation in this way. – Francesco Buonomo Aug 13 '14 at 16:11
It would be vary easy to do this with a horizontal scrollbar. – Marcel Aug 13 '14 at 16:29
I know Marcel but I like to complicate my life :) I'm searching for the solution but I really can't. Can you see the solution for this? Thanks for your consideration. – Francesco Buonomo Aug 13 '14 at 16:35

Issue: Horizontal scrolling effect with Skrollr

Here's a Demo in Fiddle

2 Answers2

Here's a Demo in Fiddle

Linked