How do I fade sections in and out when scrolling so it looks like the website stays in place and just fades sections in and out? (Example Included)

Basically, I’m looking to recreate the effect found on this website: https://monopo.co.jp/

Any advice on how to set interactions up like this?

Thanks in advance, guys!

There are posts about this technique already in the forum somewhere. It is possible, it involves creating background images in divs that are fixed and cover the full viewport height and width and given z positioning so they stack in layers then when you scroll you can target one of the BG layers using interactions to show/hide the div. PixelGeek has done a video about this on youtube.

Hope that was of some help.

Hey John! Thanks for your reply! Your reply is super helpful. I did watch that video you’re talking about. I linked to the section where he’s showing the interaction: Creating a background scroll interaction with Interactions 2.0 - YouTube

In the example above, there still appears to be a scrolling effect. In the example I provided (https://monopo.co.jp/6) it’s more of a fade in and out effect.

What are your thoughts on how this could be accomplished? Thanks again for your reply—greatly appreciated.

I think its just a question of how you style the elements and what interactions you use. Everything still appears to be triggered by scrolling but I am guessing that the first three sections are treated differently to the proceeding ones. They seem to have sections with a fixed bg image in then when you move down to the fourth section it switches over to using a ‘reveal’ on scroll effect.