Hello. There is wow js - http://mynameismatthieu.com/WOW/

Allows you to implement animation when scrolling the page. There are both in effects and out effects - effects of appearance and disappearance.

How to make so that for the button (let's say) was at the same time as the appearance effect, at 200px from the bottom of the data-wow-offset and the effect of disappearing at 500рх from the bottom.

Example: http://johnpolacek.imtqy.com/superscrollorama/

After Get skills - Fade It and Fly It Go down and see the effect, go up and the effect will disappear as it appeared.

How to do this?

    1 answer 1

     body{ align-items: center; background: #9575CD; color: #fff; display: flex; font-family: Roboto, sans-serif; font-weight: 400; font-size: 20px; margin: 0; padding: 0; } .div-1{ align-items: center; background: rgba(0,0,0,0.4); display: flex; justify-content: center; padding: 10px; position: absolute; width: calc(100vw - 20px); z-index: 2; } 
     <html> <head> <title> </title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="animate.min.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="all"> <div class="div1 wow fadeOut animated" data-wow-delay="2s"> <div class="div-1 wow fadeIn animated"> Hello, world! One </div> </div> </div> <script src="wow.min.js"></script> <script> new WOW().init(); </script> </body> </html>