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

First wrap whatever your text or content that you want to show on scroll, in one div so that you can show hide the div depending upon the scroll. Write two classes for your target div.

Your CSS:

/*Use this class when you want your content to be hidden*/
.BeforeScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  .
  .
  display: none;
}


/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  .
  .
  display: block;
}

Your HTML:

<!--Set class BeforeScoll to your target div-->

<div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll</div>

Your Script:

<!--include these script in head section or wherever you want-->

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> 

<script type = "text/javascript">
$(document).ready(function(){
  //Take your div into one js variable
  var div = $("#divToShowHide");
  //Take the current position (vertical position from top) of your div in the variable
  var pos = div.position();
  //Now when scroll event trigger do following
  $(window).scroll(function () {
   var windowpos = $(window).scrollTop();
   //Now if you scroll more than 100 pixels vertically change the class to AfterScroll
   // I am taking 100px scroll, you can take whatever you need
   if (windowpos >= (pos.top - 100)) {
     div.addClass("AfterScroll");
   }
   //If scroll is less than 100px, remove the class AfterScroll so that your content will be hidden again 
   else {
     s.removeClass("AfterScroll");
   }
   //Note: If you want the content should be shown always once you scroll and do not want to hide it again when go to top agian, no need to write the else part
 });
});
</script>

Hope it will solve your problem.

Answer 2

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:

<div id="parent-div">
<div id="child-div">
Psst .. I am here!!
</div>
</div>

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"
}

};

Answer 3

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>

Answer 4

I like this:

var doc = document, dE = doc.documentElement, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
function xy(e, d){
  if(!d)d = 'Top';
  d = 'offset'+d;
  var r = e[d];
  while(e.offsetParent){
    e = e.offsetParent; r += e[d];
  }
  return r;
}
function x(e){
  return xy(e, 'Left');
}
function y(e){
  return xy(e);
}
var txt = E('theId'), txtS = txt.style;
onscroll = function(){
  var left = dE.scrollLeft || bod.scrollLeft || 0;
  var top = dE.scrollTop  || bod.scrollTop  || 0;
  var w = innerWidth || dE.clientWidth || bod.clientWidth;
  var h = innerHeight || dE.clientHeight || bod.clientHeight;
  if(top > y(txt)-h){
    txtS.display = 'none';
  }
  else{
    txtS.display = 'block';
  }
}

I left the left stuff in there, just in case, but you can probably remove it.

Answer 5

var div=$("#divtochange");
$(window).scroll(function () {
            var windowpos = $(window).scrollTop();
            //---check the console to acurately see what the positions you need---
            console.log(windowpos);
            //---------------------

//Enter the band you want the div to be displayed
            if ((windowpos >= 0) && (windowpos <= 114)){ 
                div.addClass("AfterScroll");
            }
            else{
                div.removeClass("AfterScroll");
            }