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 effe

Answer 1

I would recommend this plugin

http://johnpolacek.github.io/superscrollorama/

Edit:

I don't know how no one noticed that the solution had to be made without using external libraries like jQuery. However, the solution is extremely easy with basic functionality. Find it here

HTML:

Psst .. I am here!!

CSS:

#parent-div
{
  position:relative;
  height:3000px;
  width:300px;
  background-color:red;
}

#child-div
{
  color:white;
  position:relative;
  top:1000px;
  width:300px;
  display:none;
  text-align:center;
}

JS:

var body=document.getElementsByTagName("body")[0];
var parent=document.getElementById("parent-div");
var child=document.getElementById("child-div");
body.onscroll = function(){
//console.log(documenhttps://fiddle.jshell.net/3urv0tp0/#tidyt.getElementById("child-div").style.top)
if(document.documentElement.scrollTop>=child.offsetTop)//Adjust Tolerance as you want
{
   child.style.display="block"
}

};