How to make this effect with Javascript? [closed]

Question

How to make this effect with Javascript? [closed]

Navigation

#1 by (8 votes)

3

I'm still studying Javascript and a friend of mine introduced me to a website that has a very nice effect on your texts.

The site is this: (example site)

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

But by scrolling down, when you reach certain heights of the site, some other texts come up. I wonder how this effect was done.

javascript html css

asked by anonymous 12.01.2017 / 20:52

1 answer

Linq filttar elements of LEFT JOIN Remove from a List of Integers

score 8 · Accepted Answer

You can use 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 to your index.html <link rel="stylesheet" href="styles/animate.css">
In your div you add the animated animação-desejada classes.

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

Access: link

If you do not want to download the plugin, you can access it via CDN. Just add it in 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");
   }
});