WOW.js alternative

An Improvement (i Hope) of the original WOW.js library

by Brett

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
		<div class="container-fluid">
			<section class="row" style="height: 7000px">
				<div class="col-xs-12 y1 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y2 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y3 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y4 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y1 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y2 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y3 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y4 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y1 wow2" data-wow2-class="bounceInLeft" data-wow2-offset="0.5" style="height: 100px;"></div>
				<div class="col-xs-12 y2 wow2" data-wow2-class="bounceInLeft" data-wow2-offset="0.5" style="height: 100px;"></div>
				<div class="col-xs-12 y3 wow2" data-wow2-class="bounceInLeft" data-wow2-offset="0.5" style="height: 100px;"></div>
				<div class="col-xs-12 y4 wow2" data-wow2-class="bounceInLeft" data-wow2-offset="0.5" style="height: 100px;"></div>
				<div class="col-xs-12 y1 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y2 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y3 wow2" data-wow2-class="bounceInLeft" style="height: 100px;"></div>
				<div class="col-xs-12 y4 wow2" data-wow2-class="bounceInLeft" style="height:...

CSS

/* ----------------------------------+-----------------------------------
							  Helper Classes
   ----------------------------------+-----------------------------------*/
.y0 {
	background-color: #FEF;
}
.y1 {
	background-color: #FF9;
}
.y2 {
	background-color: #F9F;
}
.y3 {
	background-color: #9FF;
}
.y4 {
	background-color: #F99;
}
.nopadding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

JavaScript

$(document).ready(function () {
	// Variable Initialization
	var viewportHeight = $(window).height();
	var top = $(window).scrollTop();
	var bottom = top + viewportHeight;
	initBlocks();

	showBlocks();
	$(window).scroll(function () {
		top = $(window).scrollTop();
		showBlocks();
		writePosition();
	});

	// Initialite each block
	function initBlocks() {
		$('.wow2').each(function () {
			$(this).css('visibility', 'hidden');
			$(this).data('wow2-top', $(this).offset().top);

			if ($(this).attr('data-wow2-offset')) {
				// Existe un offset, calcula punto de inicio con offset
				//$(this).attr('data-wow2-top', $(this).offset().top + ($(this).data('wow2-offset') * viewportHeight));
				$(this).data('wow2-top', $(this).offset().top + 100);
			} else {
				// NO existe un offset, calcula punto de inicio
				$(this).data('wow2-top', $(this).offset().top + 50);
			}
		});
	}


	function showBlocks() {
		$('.wow2').each(function () {
			var elementTop = $(this).data('wow2-top');

			$(this).html(elementTop);

			// Shows Elements
			if ((elementTop >= top) && (elementTop <= bottom)) {
				$(this).css('visibility', 'visible');
				$(this).addClass('animated').addClass($(this).data('wow2-class'));
			}
			
			 // Hides Elements
			 if ((elementTop < top) || (elementTop >= bottom)) {
			 $(this).css('visibility', 'hidden');
			 $(this).removeClass('animated').removeClass($(this).data('wow2-class'));
			 }
			 
		});

	}




	// ------------------------------------------------------------------------
	// Test Function just to show main variables
	// ------------------------------------------------------------------------
	function writePosition() {
		var html = '';

		$('.wow2').each(function () {
			if ($(this).attr('data-wow2-offset')) {
				$(this).html($(this).offset().top + ' - ' + ($(this).data('wow2-offset') * viewportHeight) + ' = ' + $(this).attr('data-wow2-top'));
			} else {
				$(this).html($(this).data('wow2-top'));
			}
		});
		html += 'viewport size: ' +...