jQuery: Mostrar animaciones según te desplazas por la página

Últimamente he visto que se ha puesto de moda añadir animaciones a las landing page o sitios con navegación vertical aprovechando las ventajas de las animaciones en CSS3, vamos a ver en este tutorial como hacer eso.

 

Paso 1:

Podemos nosotros mismo hacer las animciones haciendo uso de CSS transitions o podemos hacer uso una interesante librería llaamda animate.css, que puedes descargar AQUI , su funcionamiento es sencillo, basta añadir la clase “animated” y otra con el nombre de la animación. Puedes ver la lista de animaciones AQUI

 

Paso 2:

El problema de sólo añadir animate CSS es que se genera la animación aunque no la mires, debido a esto es necesario añadir un plugin de jquery que permite añadir las clases de la animación. Puedes descargar jQuery waypoints AQUI

Para implementarlo

1
2
3
4
5
6
7
8
9
10
jQuery(function($) {
$('.elemento_deseo_animar').waypoint(function() {
$(this).toggleClass( 'bounceIn animated' );
},
{
offset: '70%',
triggerOnce: true
});

});

El parámetro offset que he añadido sirve para indicar en que momento va a mostrarse la animación, si ha media pantalla, más arriba o más abajo

 

Paso 3:

A todos los elementos que deseo animar debo ponerle un opacity 0, por ejemplo:

1
h2, img { opacity:0; }

 

Puedes ver el ejemplo AQUI o puedes descargar la demo dándole like o tweet a este post

 

Compartelo para poder descargar el ejemplo


3 comentarios en “jQuery: Mostrar animaciones según te desplazas por la página

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload the CAPTCHA.