Question about using onscroll

In the example of code above, an image fades into view when manually scrolling to the element further down the page.

It looks like onscroll is triggered when certain pixels have been manually scrolled to. Is there a way to do this effect without specifying the number of pixels, such as triggering the fade-in when the element is scrolled into view?

When I do a search for “scroll into view” then I get code on how to click a button and the element scrolls to the top. But I want the image to fade in when the user manually scrolls to the image. What terminology do I search to get that code?

On scroll, if the element is visible but its currently faded out (its opacity is 0), fade it in.

1 Like

If it helps here’s an old codepen I just forked into something similar using Intersection observer.

2 Likes

Thank you all!

1 Like