Animar entrada del contenido con CSS y jQuery (scroll page)

Pequeño Script para animar los contenidos de tu sitio web al entrar en pantalla.

by Arturo Gallegos

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="item animated" data-effect="bounce">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cum nesciunt cumque veritatis, minima ullam esse pariatur doloremque necessitatibus, quasi omnis, beatae corporis est optio eius aliquam architecto suscipit consequuntur.</div>
<div class="item animated" data-effect="flash">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cum nesciunt cumque veritatis, minima ullam esse pariatur doloremque necessitatibus, quasi omnis, beatae corporis est optio eius aliquam architecto suscipit consequuntur.</div>
<div class="item animated" data-effect="jello">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cum nesciunt cumque veritatis, minima ullam esse pariatur doloremque necessitatibus, quasi omnis, beatae corporis est optio eius aliquam architecto suscipit consequuntur.</div>
<div class="item animated" data-effect="pulse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cum nesciunt cumque veritatis, minima ullam esse pariatur doloremque necessitatibus, quasi omnis, beatae corporis est optio eius aliquam architecto suscipit consequuntur.</div>
<div class="item animated" data-effect="bounce">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cum nesciunt cumque veritatis, minima ullam esse pariatur doloremque necessitatibus, quasi omnis, beatae corporis est optio eius aliquam architecto suscipit consequuntur.</div>
<div class="item animated" data-effect="flash">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cum nesciunt cumque veritatis, minima ullam esse pariatur doloremque necessitatibus, quasi omnis, beatae corporis est optio eius aliquam architecto suscipit consequuntur.</div>

SCSS

.item{
  font:14px/1.5 arial,verdana,tahoma;
  color:#666;
  padding:50px 15px;
}

JavaScript

$j = jQuery.noConflict();
$j(function ($) {
   function displayContentScroll() {
		$('.item').each(function(){
 var itemPosition = $(this).offset().top;

 var topOfWindow = $(window).scrollTop();
 if (itemPosition < topOfWindow + $( window ).height() - 50) {
 $(this).addClass($(this).data('effect'));
 }
 });
 }
 $(document).ready(displayContentScroll);// muestra el contenido que se encuentra en pantalla al cargar la pagina
 $(window).scroll(displayContentScroll);// va mostrando el contenido según se desplace en la pagina
});