Popular posts

Jason Knight yeah, image stays, elements scroll - which is what I understood. As a result the total content height would be larger than the client height. That means you'd have to clip the body height to the client height, so that there is content which overflows the body.

Such an overflow behavior would be pretty tricky to handle scroll-wise, so I think that just putting some image with fixed position there would be a lot simpler.

I can't simply do it with a fixed background. This needs to be done in Javascript. The ScrollMagic plugin looks fine for this, but I can't seem to make it work, or it requires a bigger learning curve. What I have done until now is when you scroll down, then elements display from opacity 0 to 1 in a fade transition. I wan't also to make some movements of the displayed elements. For example lets say from 400px to 700px I want the absolutely possitioned element to do a zigzag.

Klevis Miho the little info you present here suggests that a fixed background is a viable option. Try to elaborate, why a fixed background doesn't cut it, and for what reason you believe that this JS library is necessary?

Yes you are right, the way I presented the info it makes no sense to use a Js library. Here I have put the demo online tok.al/test . So you scroll for 1000 pixels and the element show on fade. I want them to show using some other forms too (movements), which I agree can be done with css only. But after ending 1000pixels I want to go o the next container which will have it's own animations. I feel that with the ScrollMagic plugin (or with Javascript in general) I will have more control over the situation. What do you think?

Klevis Miho I think you don't need the lib and CSS can give you plenty of control! All you have to do is make containers, which define sliding behavior and to which child elements can relate. Then fill them with the sliding backgrounds, one per container. You only have one background fixed and every other background is absolute. The first one is absolute at the bottom of its container, every other one needs two classes, which either put them at the top or bottom of their container, depending on the scroll position. Then all you need to do is define a few elements you want to display and where they should appear. I made a simple example with two backgrounds and six elements, which appear at certain scroll positions relative to their background's scroll position in the container. It's just a quick hack and can be improved in a number of ways, but I hope you get the gist of how to get simple stuff done without big, complex and inflexible libraries.

Marco Alka that seems to solve my issue. I think I will use your solution. Thank you very much.