Hey there, I saw this incredible background colour change interaction on the following site and was curious if anyone knew how I could recreate it (don’t mind using custom code embeds as well…)
Site: https://krivitzky.ru/en/blog/bankruptcy/blog-3/
Video of interaction: https://we.tl/t-lHYAE9gRqp
Thank you!
Here is my public share link: LINK
(how to access public share link)
hi @seneca005 When you open this website in Dev Tools you will see how they have it done. It is mix of columns width interaction mixed with blend-mode.
Didn’t pixelgeek do a YouTube video of this a few months back?
Does look nice though, shutter blind effect.
Hey there Idatus,
I searched on YouTube but couldn’t find anything. Mind sending me a link to the tutorial? Thank you! I appreciate your help!
I looked on pixel and searched but couldn’t find it.
I did inspect the site as Stan did and looked up blend-mode
I found this link on the forum
Vincent adds this
<style>
.multiply {mix-blend-mode: multiply}
</style>
add a class to the div etc of multiply and the .multiply means apply this to anything with the class name of multiply.
Then its a bunch of vertical divs that change as the pages scrolls.
Hope that helps a little bit. At least I learned some more code!
Hi @seneca005 here is a simple example how to if you still struggle to recreate this effect. Keep in mind that is just simple example (I have created in a few minutes) and I didn’t pay attention to create exactly identical effect but is close. And of course there is more ways how to achieve this effect.
Hi @seneca005 do you need more clarifications how to ?
Hey Stan, I’ve not yet tried to use it but I will soon. I want you to know that I appreciate your help a lot and checking up on me to see if it has worked. I will update you soon hopefully.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.