How to do this with Javascript?

Question

I’m still studying Javascript and a friend of mine introduced me a site that has a very cool effect on your texts.

This is the site: (example site)

As we can see, when the site loads, it gives an effect in which the elements are forming on the screen. I know how to do this.

But making a scroll down, when arriving at certain times of the site, some other texts come up. I would like to know how that effect was done.

Answer 1

You can use the Animate.css. It gives you several css classes ready to make these animations.

• Just download the plugin(it’s just a css file).
• Point it at your index.html <link rel="stylesheet" href="styles/animate.css">
• In your div you add the classes animated animação-desejada.

Ex: <div class="animated fadeInUp"></div>

Access: https://daneden.github.io/animate.css/

If you don’t want to download the plugin, you can access it via CDN. Just add it to your index.html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

To add the effect according to the height of the scrollbar, do:

JS (using jquery)

$(window).scroll(function() {    
   var scroll = $(window).scrollTop();

   if (scroll >= 500) { //você escolhe o valor que desejar
      $("#seuElemento").addClass("animated fadeInUp");
   }
});