in the link below,
As you scroll the screen, you notice that the div's are getting a transition effect. But the effect only occurs when scrolling arrives at div. Before, he's waiting.
How to make this effect only when the div appears on the screen?
I even get the effect, but if the div is down there, the effect occurs and when I roll the screen, upon reaching the div, the effect has already occurred!
You can use the scrollReveal plugin to resolve your issue. It is very simple to use and has complete documentation.
It would look something like this:
// JavaScript
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/scrollreveal.js/3.2.0/scrollreveal.min.js"></script>
<div class="foo"> <h1>Títilo</h1> </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="bar"> <h2>Subtítulo</h2> </div>I hope I have helped.