Code widget activating on scroll

Custom code
1

Hi everyone!

I’m currently working on a website where I have a large video playing in the background. In the hero section, the video is displayed in full color, but I would like to change it to a grayscale (no color) effect when scrolling down to the next section of the website.

I’ve managed to add CSS to make the full background grayscale. but not one part.

Could anyone please help me with how to implement this transition from color to grayscale as I scroll down?

uitleg readymag
uitleg readymag1920×1200 99.9 KB

2

well, one approach would be to set up a objection observer with JS. It is basically a listener if some element is in view or not.

If this is firing you could animate a css filter (greyscale) to go from 0 to 100, applied to your video element.