css3 effect when div appears

Asked

Viewed 1,046 times

0

at the link below,

http://ub.universidadedabiblia.com.br/curso-bachelor’s degree in theology/? ref=U2479268R&hsrc=R0n1cnnv

As the screen rolls, it is observed that the div’s are receiving transition effect. But the effect only occurs when the scroll arrives in the div. Before, it waits.

How to do 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, when arriving in the div, the effect has already occurred!

css css3

1 answer

1


You can use the plugin scrollReveal to solve your problem.
It is very simple to use and has a 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>
<script src="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’ve helped.

  • Strange, it works here, but it doesn’t work on my page. I imported Jquery and Scroolreveal in that order to head, I put div’s in body, and added js from the plugin and it doesn’t work!

  • The correct order has to be this: 1º Jquery | 2º scrollreveal | 3º HTML Code | 4º Function that calls scrollreveal.

  • Note that the JS code block has to stay after html

  • I hope I’ve helped.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.