Cacher is the code snippet organizer for pro developers

Necesitamos las siguientes librerias js y css

Podemos separar las media queries en otro archivo queries.css para tener el css mejor organizado (este se tiene que cargar después del styles.css)


Bootstrap
animate.css
waypoints 
modernizr

Estudiar
retina.js
toucheffects.js


Herramienta muy interesante para crear pasadores de imagens como por ejemplo un carrousel
http://flickity.metafizzy.co/

/* ==========================================================================
Creamos los waypoints para poder llamarlos con la class en el elemento en questión.
========================================================================== */

$(document).ready(function() {

	/***************** Waypoints ******************/

	$('.wp1').waypoint(function() {
		$('.wp1').addClass('animated fadeInLeft');
	}, {
		offset: '75%'
	});
	$('.wp2').waypoint(function() {
		$('.wp2').addClass('animated fadeInDown');
	}, {
		offset: '75%'
	});
	$('.wp3').waypoint(function() {
		$('.wp3').addClass('animated bounceInDown');
	}, {
		offset: '75%'
	});
	$('.wp4').waypoint(function() {
		$('.wp4').addClass('animated fadeInDown');
	}, {
		offset: '75%'
	});

});

<!-- Estructura básica de bootstrap --> 

<section class="section-one">
  <div class="container"><!-- class="container-fluid" si queremos que tenga width 100% -->
    <div class="row">
      <div class="col-md-12">
      
        <div class="col-md-4 wp2 animated fadeInDown"><h1>Hola Mundo</h1></div>
        <div class="col-md-4 wp2 animated fadeInDown"><h1>Hola Mundo</h1></div>
        <div class="col-md-4 wp2 animated fadeInDown"><h1>Hola Mundo</h1></div>
        
        <!-- Añadimos la class wp2 para ejecutar el waypoint 2  -->
        
      </div>
    </div>
  </div>
</section>

/* ========================================================================================
Añadir libreria normalize para asegurar el funcionamiento en todos los navegadores
=========================================================================================== */

/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 {
    visibility: hidden
}
/* ==========================================================================
Animate.css
========================================================================== */
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .bounceInDown {
    visibility: visible
}
/* ==========================================================================
Delays
========================================================================== */
.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}