Ú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
[cc lang=»js»]
jQuery(function($) {
$(‘.elemento_deseo_animar’).waypoint(function() {
$(this).toggleClass( ‘bounceIn animated’ );
},
{
offset: ‘70%’,
triggerOnce: true
});
});
[/cc]
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:
[cc lang=»css»]
h2, img { opacity:0; }
[/cc]
Puedes ver el ejemplo AQUI o puedes descargar la demo dándole like o tweet a este post
[social-download button_id=»9d648bc233e2a86b9″ dl_id=»https://www.miguelmanchego.com/wp-content/uploads/2014/03/jquery-mostrar-animacion.zip» theme=»blue» message=»Compartelo para poder descargar el ejemplo» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
