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
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 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
exactly what i needed. thanks!