Scroll Animations

by Petr Haluza

HTML

<body>
  <div class="wrapper">
    <div class="block animatable bounceIn">bounceIn</div>
    <div class="block animatable bounceInLeft">bounceInLeft</div>
    <div class="block animatable bounceInRight">bounceInRight</div>
    <div class="block animatable fadeIn">fadeIn</div>
    <div class="block animated fadeInDown">fadeInDown</div>
    <div class="block animatable fadeInUp">fadeInUp</div>
    <div class="block animatable moveUp">moveUp</div>
    <div class="block animatable fadeBgColor">fadeBgColor</div>
    
    <div class="block animatable bounceIn">bounceIn</div>
    <div class="block animatable bounceInLeft">bounceInLeft</div>
    <div class="block animatable bounceInRight">bounceInRight</div>
    <div class="block animatable fadeIn">fadeIn</div>
    <div class="block animated fadeInDown">fadeInDown</div>
    <div class="block animatable fadeInUp">fadeInUp</div>
    <div class="block animatable moveUp">moveUp</div>
    <div class="block animatable fadeBgColor">fadeBgColor</div>
    
    <div class="block animatable bounceIn">bounceIn</div>
    <div class="block animatable bounceInLeft">bounceInLeft</div>
    <div class="block animatable bounceInRight">bounceInRight</div>
    <div class="block animatable fadeIn">fadeIn</div>
    <div class="block animated fadeInDown">fadeInDown</div>
    <div class="block animatable fadeInUp">fadeInUp</div>
    <div class="block animatable moveUp">moveUp</div>
    <div class="block animatable fadeBgColor">fadeBgColor</div>
    
    <div class="block animatable bounceIn">bounceIn</div>
    <div class="block animatable bounceInLeft">bounceInLeft</div>
    <div class="block animatable bounceInRight">bounceInRight</div>
    <div class="block animatable fadeIn">fadeIn</div>
    <div class="block animated fadeInDown">fadeInDown</div>
    <div class="block animatable fadeInUp">fadeInUp</div>
    <div class="block animatable moveUp">moveUp</div>
    <div class="block animatable fadeBgColor">fadeBgColor</div>
    
    <div...

CSS

body {
  background: #fff 
}

.block {
  height: 5em;
  line-height: 5em;
  width: 10em;
  background: #464646;
  color: #fdfdfd;
  text-align: center;
  margin: 1em auto;
  text-shadow: 0 0 1px #333; /* so one can see fadeBgColor properly */
}

/* initially hide animatable objects */
.animatable {
  visibility: hidden;
  -webkit-animation-play-state: paused;        
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0%...

JavaScript

jQuery(function($) {
  
  // Function which adds the 'animated' class to any '.animatable' in view
  var doAnimations = function() {
    
    // Calc current offset and get all animatables
    var offset = $(window).scrollTop() + $(window).height(),
        $animatables = $('.animatable');
    
    // Unbind scroll handler if we have no animatables
    if ($animatables.size() == 0) {
      $(window).off('scroll', doAnimations);
    }
    
    // Check all animatables and animate them if necessary
		$animatables.each(function(i) {
       var $animatable = $(this);
			if (($animatable.offset().top + $animatable.height() - 20) < offset) {
        $animatable.removeClass('animatable').addClass('animated');
			}
    });

	};
  
  // Hook doAnimations on scroll, and trigger a scroll
	$(window).on('scroll', doAnimations);
  $(window).trigger('scroll');

});