Ú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
[social-download button_id=»9d648bc233e2a86b9″ dl_id=»http://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»/]
Estoy intentando integrar la funcionalidad en un tema de wordpress, pero no logro que funcione. Puedes ayudarme?
Gracias
una pregunta como hago para que el animatecss funcione sin star recargando la pagina
Hola!
He probado de todas formas y no logro que funcione. 🙁
Hola, lo he probado y funciona sin problema, pero ujn detalle; tengo tres divs a animar con el mismo nombre de clase pero solo me anima el primero, los demás no. Sabes a que se debe??
Gracias.
Hola, gracias por el tutorial.
En el caso de tener varias imágenes con un efecto cualquiera (ejem: fade in up ), pero a una dejarla sin ningún efecto, (ejem: la img del logo de la pagina ) que propiedad habría que ponerle a esa img?
Graciaaas ^^ , si funcionó y queda genial xd
Algunos problemas con el this, pero quedó :B
Hola Miguel!
Muchísimas gracias por la explicación y el ejemplo. Está muy bien explicado y al ir a ponerlo en práctica me ha funcionado a la primera 😉
suuuper excelente, mil gracias por el aporte, en esta pagina se encuentra las animaciones aquellos que no les funcione.
https://daneden.github.io/animate.css/
Muchas graciasme sirvio bastante Saludos de Colombia!!!!! 😀
Gracias por el aporte. Sería interesante que corrigieses las faltas de ortografía que deslucen el post.