Div overlay effects while scrolling

Hello, I am trying to achieve this effect right here, when you scroll: https://readymag.com/bethanychristiantrust/annual-report-2016/6/

I am trying with Jquery and I am not yet there.

Any help would be great

Hi @Dalot ,
What do you have so far?
Do you have a CodePen in progress?
Or are you looking for research resources?

There you go https://codepen.io/Dalot/pen/NBLjLY

Do not mind about the missing images

Don’t you already have that effect? What’s the problem?

I do not have the overlay/shadow effect for the upcoming div :s

I can only tell you how the feature is supposed to work. To given you an actual implementation with your existing code would be too much work for me.

It looks like this sort of html structure is necessary to gradually make next page visible on scroll down:
(In pseudocode)

<Container>
    <BlackLayer background=black, opacity = dynamic, z-index = current_page - 1>
    <Page1 height=page-height, z-index = 2>
    <Page2 height=page-height, z-index = 1>
    ...

So there is a single BlackLayer that seats on top of next page, which makes the next page invisible by using black background and 1 opacity. The opacity gradually decreases toward 0 while user is scrolling down. The z-index decreases by 1 when a user fully scrolls a page.

1 Like

I kind of understand what you mean but I am lost how to translate that into code, do you have any further resources I can look up to?

I don’t have a specific resource that will help you achieve this…

I may be able to come up with simple demo code. Frankly, I have never done this so I will need to refresh my knowledge in CSS and DOM properties. I’ll try it though, but it won’t be done soon.

1 Like

Hi @Dalot,

Basically, @gunhoo93 has given a good beginning for you to work with.

Create a div as a container for the Blacklayer. Style it all in CSS. And you can probably change the current_page count in JavaScript to apply the z-index as an addClass depending on where the scroll sits.

As @camperextraordinaire mentioned, you can also look at the source code through the Chrome Inspector to get a better idea of how the original author did it.

Part of the fun of coding is finding great ways to be creative.

Please post the final product, I’m looking forward to seeing it.

Well, I followed your guidelines, I still have no idea how to do this :confused:

Think of the CSS code first.

Then look at how JavaScript can help when the event changes (like being on Page 2).

I’m not proud of it but this is what I’ve got so far with initial scratching, perhaps think of it as a proof of concept:
https://codepen.io/gunhoo93/pen/GBXExB

Notes

  • I don’t have JQuery experience, so don’t treat how I used jQuery seriously.
  • I haven’t wrote any accurate scroll tracking system, which is why the code behaves wonky. For smooth UX, writing scroll tracking system seems pretty much necessary for this kind of thing.
  • Height manipulation is somewhat tricky without writing whole thing in JS. I think this is also what the referenced site is doing.

I’m probably gonna improve this for fun, and I’ll let you know when that happens.

2 Likes

That was a really nice thing to do!

That stuff is way out of my league. I did make a few observations from that page that will keep me thinking for a while.
The text content is one long container that scrolls or fades based on scroll position.
The background panels (pics) are absolutely positioned and stacked with z-index. When it is time for them to scroll up transform : translateX is applied inline. Once out of view they are held there with a negative top:

I favorited your pen so I can check back in later to see how that’s going.

Well, thanks and good observation. I didn’t really look too deeply into the code to notice the transform.

This is probably way out of my league too, so be ready to be disappointed by my code :).

The thing is this sort of site looks pretty, but it is very fragile because everything must be tuned precisely. So, I don’t know if it’s really worth working on it; but, it is pretty fun.

1 Like

Yes, this is just destroying me…

Well I got this: https://codepen.io/Dalot/pen/JBaBwJ

I changed your code a bit but this is just hard… I needed this for yesterday and I am still at this point.

The code is not entirely dynamic at this point, I tried a trillion of things and I did not find anything about this anywhere

1 Like

If you choose to forget about fixed or absolute positioning like the referenced site, then the problem gets much simpler.

For example: https://codepen.io/gunhoo93/pen/RBYMZx?editors=1010

1 Like

Hey guys, I think I got it:

Thank you so much for your help!

EDIT: The only thing I am wondering is how can I have sticky sections