How to do this with Javascript?

Asked

Viewed 369 times

3

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.

javascript html css

  • This one? There is an example on this page ai, you can use without wordpress.. See on Usage Examples

  • 1

    Nicolas, I think the crowd is negatively asking your question because the link you put there is out of the air.... Try to correct

  • Thanks for letting me know! I don’t even know what happened, but I fixed the link

  • Tidied up and tested?

  • He misspelled: is http://pizzariamjuan.com.br/

1 answer

8


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");
   }
});

  • Wow, this file really is a great branch break. But in the case of activation only when the scroll bar is at a certain point of the site. How to do?

  • I updated the answer. Check it out =)

  • Ae Amigo! Helped a lot here, I already managed to make the effect I wanted and I discovered several others :)

Browser other questions tagged javascript html css

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