Search code examples
cssscrollclip

Make relative div clip static logo on scroll - CSS

I want to achieve the following effect on a single-page scrolling website.

The site is divided in different section (usign the <section> tag of course) and there is a fixed position logo in the bottom left.

I want to be able to mask/clip the logo color depending on which section is below it. For starters I put the same logo twice on top of each other so there are basically two z-indexed logos one on top of another.

Below are some quick mock-ups for reference.

Section 1: enter image description here

Section 2: enter image description here

Effect I want while scrolling:

enter image description here

Thanks in advance!

Solution

  • As kindly pointed out above the answer to this question can be found here:

    How to create image scrolling blend effect with CSS?

    I was hoping to try and tweak this a bit and try an approach either with the clip property or using both height and overflow:hidden. I can't find the time to try it right now but I will update accordingly if I ever do.