Search posts, tags, users, and pages
tl;dr of Jason's answer:
throw away that JS lib, you don't need it. Just create a div element with the image as background-image, make it position: fixed and background-size: cover. Then write your content as usual. The background image will stay and cover your screen, while you can scroll through your content.
Edit (VanillaJS scroller animations):
Probably don't even need the DIV, put it on body with background-position:fixed;
Jason Knight might work with some CSS, but then the body does not stretch over the whole height of the content (just the client). Feels a bit hacky imho.
Marco Alka When they said "stays there" I assumed fixed positioning, which means it doesn't scroll, which means it wouldn't 'stretch' behind the entire content anyways. At MOST it would just fill the screen best it could...
In which case you add background-size:cover; -- or maybe background-size:contain; depending on how you want it placed/cropped.
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.