Parallax Scrolling

Question

I want to make a webpage in layers that scroll at different speeds. The most convenient way for adding my content would be if each layer was a div element that scrolled at it's own speed, and they all overlapped.

How could I do this? I am fairly competent with JavaScript, but the CSS layering and positioning sometimes confuse me. I just can't work out how to make it.

To explain what I want, here's what my HTML might look like.

<div id="1">Hello</div>
<div id="2">Hello</div>
<div id="3">Hello</div>

At the start, all three hellos should be perfectly overlapping so I can only see the top one. Then, when I scroll down, each one will move at a different speed, so I will be able to see them all. They will get farther and farther apart as I scroll. But I must be able to scroll back up.

Thank you.

Answer 1

This is what I can think of ..
https://code.sololearn.com/WUAdbd6f6c6J/?ref=app

Answer 2

If the bottom layers are overlapped, how do we know it's scrolling at different speeds. How does the lowest layer scroll down since it has already at top?

Parallax scrolling is scrolling at different speed but each layer still has it own container spacing, it wont not fully overlapping.

Answer 3

Thanks for the demo. I'll take a deeper look at it, then experiment myself a little bit, before asking further questions.

Answer 4

Hi James,

I am quite familiar with parallax scrolling, but I'm not really sure that's what you are describing as your desired outcome.

Can you please post the code you have so far?

Answer 5

Perhaps I have the wrong word. I just want like 3 documents that overlap and scroll at different speeds, without one affecting the other. Can it be done?

I'll try to upload some code later, but it never did what I wanted anyway.