How to make text appear on scroll in html

Question

Hello, I want a certain text to appear when I scroll past it or when I scroll until the point where the text is. The effect when appearing should be somewhat like the first effect on the top of the website http://namanyayg.com/.

I want the effect in minimal code with pure CSS and JS i.e no jQuery.

I was thinking that maybe I would use something like a display:none property for a span and then when you scroll past it the display becomes block but I dont know how to trigger the effect using javascript. Any help would be appreciated.

Answer 1

I was looking for this either. Here i was trying to make "show text after scrolling to (number)px with fade effect". I wish it will work as it works for me :) The animation will be playing again if u scroll back to it, idk how to make it just one like in web u showed xd (i will edit if I find out)

    window.addEventListener("scroll", function() {showFunction()});

    function showFunction() {
        if (document.body.scrollTop > 900 || document.documentElement.scrollTop > 900) {
            document.getElementById("toptexts2").style.display = "block";
        } else {
            document.getElementById("toptexts2").style.display = "none";
        }
    }

    .toptexts2 {
       animation: fadeEffect 3s; /* fading effect takes 3s */
    }
    
    @keyframes fadeEffect { /* from 0 to full opacity */
       from {opacity: 0;}
       to {opacity: 1;}
    }

    <div class="toptexts2" id="toptexts2">
     <div>Hi!</div>
     <div>↓ go down ↓</div>
    </div>