How to code a Javascript Intersection Observer that makes text appear on scroll

This week, I'm going to show you how to use the JavaScript Intersection Observer to make text smoothly appear on the page as the user scrolls down.

The complete code is also available through my GitHub for you:

OR

View completed project on my CodePen:

For other Intersection Observer tutorials, check out the following video:

- How to add animated underlines to your headings with the Intersection Observer API:

Other tutorials from my channel:

- Code an interactive background animation with CSS and JavaScript:

- How to code CSS transitioning gradients:

- How to code CSS text animations:

I am also on social media, so feel free to connect and reach out:

For weekly coding tutorials, subscribe here:

[marcospapa]

It was very well explained. Greetings from Brazil.

[lilangeldreams]

I found a solution to the problem (for the people who needs it): We can't have two "body" declared in our html pages (as well as the "head" one).
So if the colored background does not appear, it's probably because of that.
Thanks a lot for your time ^^! Great tutos !!

[ibrahimkhurshid]

She explained it smoothly without causing chaos.

[taksumaq]

I really enjoyed the video. Very well explained and in a good and calm pace. Thank you! Subscribed :)

[Rockzsam]

i was realy need of understanding about it. thx for expalain

[daniboi]

Thanks for the video! It helped a lot. May I ask what if I don't want to target all of the <p> in the html, but only for <p> in a specific class/id?

[stilettoarts.design]

Thanks for the video! It helped a lot. However, this only works when the page loads, but how do I make it scroll every time I do up and down of the page without having to load it every time ?

[noNumberSherlock]

Hello Patty! What a great tutorial. You make an excellent teacher. A great pace and voice!
I want so much to understand this and copied all the code you provided. ( Thank you ).
I don't know what I am missing. Everything works except: Visit Iceland", "Book Now" doesn't show and the background is white ( not black ), the text doesn't show either. I placed the html on a page, copied the CSS between style tags and the JavaScript between <script type="text/javascript"> and <script> tags. May I please ask, what am I missing? Thank you.

[at]

i copied everything with 0 errors appearing and i think I made 0 mistakes and all that happened is that all the text disappeared

[Jb]

can't hear anything easily. get a better microphone