How to make my text appearing while scrolling website

Question

How can I make my text appear when scrolling? I've found this http://www.jqueryrain.com/?HZtLD8hN but I'd like to know how it works. There was a similar question asked but I don't understand it. Can someone explain, or provide examples, how to make this work?

Thanks

HTML

<div id = "divToShowHide" class = "BeforeScroll">Content i want to appear while scrolling</div>

CSS

.BeforeScroll {
width: 100%;
height: 200px;
background-color: yellow;
}

.AfterScroll {
width: 100%;
height: 200px;
background-color: red;
}

I has found this but i don't understand it: http://stackoverflow.com/questions/20307555/how-to-make-text-appear-on-scroll-in-html — martinkzn, Jan 04 '16 at 12:11
You will increase the change to get a good answer if you post a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Mike Müller, Jan 04 '16 at 12:11
https://github.com/jjcosgrove/jquery-aniview/blob/master/jquery.aniview.js this is the code behind it to understand it — Rajarshi Das, Jan 04 '16 at 12:12
Well you don't need **jquery plugin** for that.. Just be aware of this **[`animate.css`](https://daneden.github.io/animate.css/)** — Guruprasad J Rao, Jan 04 '16 at 12:12
you can use animate.css style sheet https://github.com/daneden/animate.css — shiva chauhan, Jan 04 '16 at 12:18

guysigner · Accepted Answer · 2016-01-04T12:37:38.987

A basic example is this: say some of your content is in a<div id="appearble_text"> that is at 70% of the total height of the page. <div id="container">

Initially you will set document.getElementById("appearable_text").style.display = "none";

You can set up a function

function OnScroll() {

            var totalHeight = this.offsetHeight; //(this, because container is the caller of the function from the code below)
            if (this.scrollTop || this.scrollTop > totalHeight * 0.7) { //if scrolling reached 70% of height
               document.getElementById("appearable_text").style.display = "block"; 
            }
        }

and then use it

var container = document.getElementById("container");
container.onscroll = OnScroll;

Of course, instead of just suddenly displaying the <div> you can fade it in or do all sorts of CSS/JQuery tricks you like.

How to make my text appearing while scrolling website

1 Answers1

Linked