CodePen

HTML

            
              <h1>FadeOnScroll.js</h1>
<p>Version 1.1 </p>
<p> By: <a href="http://www.felipemartinin.com.br"> Felipe Martinin</a></p>

<div id="container">
  <div class="overScroll FadeInUp"><h2>Fade In Up</h2></div>
    <div class="overScroll FadeInLeft"><h2>Fade In Left</h2></div>
    <div class="overScroll FadeInRight"><h2>Fade In Right</h2></div>
      <div class="overScroll RollIn"><h2>RollIn</h2></div>
    <div class="overScroll BounceInLeft"><h2>Bounce In Left </h2></div>
    <div class="overScroll BounceInRight"><h2>Bounce In Right</h2></div> 
    <div class="overScroll FlipInX"><h2>FlipInX</h2></div>
    <div class="overScroll FlipInY"><h2>FlipInY</h2></div>
</div>


            
          
!

CSS

            
              

.overScroll {
    opacity:0;
 color: red;

}


/* Only style */

body {
  background: #2c3e50;
  font: 14px 'Helvetica', sans-serif;
  color: #fff;
}


#container
{
   width: 980px;
   margin: auto;
  position: relative;
}

#container DIV
{ 
    margin-bottom: 50px; 
    color: #fff;
    height: 350px;
  position: relative;
}


h1 {
  text-align: center;
  font-size: 42px;
  font: 60px 'Open Sans', sans-serif;
  font-weight: 100;
}

h2 {
  position: relative;
  top:45%;
  text-align: center;
}

p {
  font: 18px 'Open Sans', sans-serif;
  text-align: center;
  font-weight: 100;
}


a {
  color: #fff;
}


.FadeInUp {
  background: #1abc9c;
  border-radius: 10px;
  width: 100%;
}

.FadeInLeft {
  background: #3498db;
  border-radius: 10px;
  width: 47%;
  float: left;
  margin-right: 6%;
}


.FadeInRight {
  background: #3498db;
  border-radius: 10px;
  width: 47%;
  float: left;
}

.RollIn {
  background: #9b59b6;
  border-radius: 10px;
  width: 100%;
  clear: both;
}

.BounceInLeft {
  background: #e74c3c;
  border-radius: 10px;
  width: 47%;
  float: left;
  margin-right: 6%;
}

.BounceInRight {
   background: #e74c3c;
  border-radius: 10px;
  width: 47%;
  float: left;
}


.RollIn {
  background: #9b59b6;
  border-radius: 10px;
  width: 100%;
  clear: both;
}

.FlipInX {
  background: #e67e22;
  border-radius: 10px;
  width: 100%;
  clear: both;
}

.FlipInY {
  background: #f1c40f;
  border-radius: 10px;
  width: 100%;

}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*

FadeOnScroll.js
Author: Felipe Martinin
URL: felipemartinin.com.br


*/

jQuery(document).ready(function ($) {

    /* Every time the window is scrolled */
    $(window).scroll(function () {

        /* Check the location of each desired element */
        $('.overScroll').each(function (i) {

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
           $('.overScroll').css({'-webkit-animation-delay':'.4s'})
             
          /* If the object is completely visible in the window, will fade with this animation: */
   if (bottom_of_window > bottom_of_object) {
     
               
     
                if ($(this).hasClass('FadeInUp')) {
                    $(this).addClass('fadeInUp animated');
                }
                if ($(this).hasClass('FadeInLeft')) {
                    $(this).addClass('fadeInLeft animated');
                }
                if ($(this).hasClass('FadeInRight')) {
                    $(this).addClass('fadeInRight animated');
                }
                if ($(this).hasClass('BounceInLeft')) {
                    $(this).addClass('bounceInLeft animated');
                    $(this).css({'opacity':'1'});
                }
                 if ($(this).hasClass('BounceInRight')) {
                    $(this).addClass('bounceInRight animated');
                    $(this).css({'opacity':'1'});
                }
                 if ($(this).hasClass('FlipInX')) {
                    $(this).addClass('flipInX animated');
                }
                 if ($(this).hasClass('FlipInY')) {
                    $(this).addClass('flipInY animated');
                }
                if ($(this).hasClass('RollIn')) {
                    $(this).addClass('rollIn animated');
                }
            }
            
        }); 
    
    });
    
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................