Mix Blend Mode (black-white)


I try to build a mix-blend-mode with black and white text similar to this page: https://www.red-company.nl
The text over the hero image is white and changes to black when you scroll to the white section.
I tried to work with “mix-blend-mode: difference” but for images it is not working.

Does someone have another idea?
My experiment: https://powerparts.webflow.io/overflow-test
Read only mode: https://preview.webflow.com/preview/powerparts?utm_medium=preview_link&utm_source=designer&utm_content=powerparts&preview=fac687809a3d72853b90621bd2b16761&pageId=5e9ac8479aae7ea6b3b041bb&mode=preview

Many thanks!

In your reference they use two text elements (One black and one white):

This is not blend modes effect.

Very cool effect

As @Siton_Systems said, this is actually more of a trick using two separate elements with some z-index and hidden overflow trickery. I’m not in front of my computer at the moment but if it would be useful I could try to recreating the effect on a project you could clone. Let me know!

@Siton_Systems and @mikeyevin, many thanks for your answers.
@mikeyevin it would be awesome, if you could try to recreate and I would be able to clone!
Thanks so much.

@Siton_Systems @mikeyevin I figured it out:

I watched the following video and “clip” was the magic: https://www.youtube.com/watch?v=Y0W_xYrbzmA&t=345s
But now the element is fixed and cannot move up with the text.
Is it possible to make the fixed element related to a div?
Many thanks


@Siton_Systems @mikeyevin now it is working.
The last text item has to be sticky to be able to move up with the content.

@philippchrome - Glad you figured it out! It’s a great looking effect and it’s nice to know that @PixelGeek was kind enough to record a video for reference. Good luck with the project :metal:

exactly what i needed. thanks! :blue_heart: :pray: