Scrolling effect

[ksymmons]

Hey,

Does anyone know how to achieve the scrolling effect shown on the attached video? Essentially, the green layer needs to stay fixed until the orange layer gets to its topmost position. Once that happens, the green layer will begin to scroll and a small portion of the orange layer, together with the sticker that says "Drama", will remain visible.

I need to create this for a new site and can't seem to figure out a way to get this effect.

Any help will be greatly appreciated.

Thanks everyone.

[pwired]

Use two divs with different z-index on top of each other. Or use a parent div with postition relative and the child div with position absolute.

You can use many different ways to get the effect e.g. viewport, scrollspy, jquery, etc.

[ksymmons]

Hey pwired,

Thanks for your reply. Sure, I'm using two divs, one for each layer. Here's some sample code:

<div class="orange"></div>
<div class="green"></div>

Now, how can I make it so the orange layer scrolls while the green layer doesn't? And then, once the orange layer gets to its highest position, get the green layer to start scrolling? See, I've tried setting a fixed position on the green layer, but then nothing scrolls. I've also tried setting a position absolute on the green layer, with top: 0, and that puts the green layer behind the orange layer, which is what I want, but the problem then is that both layers scroll from the very beginning.

So, any ideas? If you can provide some working code I will really appreciate it!

[Robin S]

You can achieve loads of different scrolling effects with a library like http://scrollmagic.io/

Example similar to what you are describing: http://scrollmagic.io/examples/basic/section_wipes_natural.html

[ksymmons]

Thank you guys for your help. I managed to get it to work by using a combination of position absolute and fixed and some simple jQuery.