Mix Blend Mode (black-white)

Design help General
1

Hi!

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!

2

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

image
image1898×846 566 KB

This is not blend modes effect.

image
image1397×404 182 KB

Very cool effect

3

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!

4

@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.

5

@Siton_Systems @mikeyevin I figured it out:
https://powerparts.webflow.io/overflow-new
https://preview.webflow.com/preview/powerparts?utm_medium=preview_link&utm_source=designer&utm_content=powerparts&preview=ebd897a95d569f89aebe55e44d142fd7&pageId=5e9c95c31ceb3ef7ec602921&mode=preview

I watched the following video and “clip” was the magic: How to Webflow: Text reveal masking on scroll - YouTube
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

2 Likes
6

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

7

@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:

8

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