Created
September 27, 2016 18:52
-
-
Save wesleyramalho/a97d1ee9c31ac7cd9b17c21112aa1c0a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="estilo.css"> | |
| <link rel="javascript" type="text/javascript" href="script.js"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <div class="fade">Fade In 01</div> | |
| <div class="fade">Fade In 02</div> | |
| <div class="fade">Fade In 03</div> | |
| <div class="fade">Fade In 04</div> | |
| <div class="fade">Fade In 05</div> | |
| <div class="fade">Fade In 06</div> | |
| <div class="fade">Fade In 07</div> | |
| <div class="fade">Fade In 08</div> | |
| <div class="fade">Fade In 09</div> | |
| <div class="fade">Fade In 10</div> | |
| </div> | |
| <script> | |
| $(window).on("load",function() { | |
| $(window).scroll(function() { | |
| $(".fade").each(function() { | |
| /* Check the location of each desired element */ | |
| var objectBottom = $(this).offset().top + $(this).outerHeight(); | |
| var windowBottom = $(window).scrollTop() + $(window).innerHeight(); | |
| /* If the element is completely within bounds of the window, fade it in */ | |
| if (objectBottom < windowBottom) { //object comes into view (scrolling down) | |
| if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);} | |
| } else { //object goes out of view (scrolling up) | |
| if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);} | |
| } | |
| }); | |
| }); $(window).scroll(); //invoke scroll-handler on page-load | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment