Cheat Sheet: Animaciones CSS3

Este fin de semana estuve jugando un buen rato animando elementos con CSS3. Algo que me parecía bastante engorroso en un comienzo se convirtió en algo mucho más sencillo de lo que pensaba.

CSS3 Animation cheat sheet es un recurso que me sirvió muchísimo, se trata de un sitio web que contiene ejemplos de animaciones utilizando hojas de estilo. Cada una de las propiedades de CSS3 relacionadas a la animación cuenta con un ejemplo practico, algo que facilita considerablemente el proceso de aprendizaje.

crear animaciones css3

Este proyecto no es solamente una guía de aprendizaje, también auspicia de framework en lo que se refiere a animaciones con CSS3. Utilizando la hoja de estilo animations.css podemos crear complejas animaciones simplemente utilizando una clase.

Ejemplo de animación CSS3

Primero incorporamos la hoja de estilo a nuestro proyecto:

<link rel="stylesheet" href="css/animations.css">

Luego simplemente anexamos al objeto la clase con el efecto que deseamos aplicar.

<div id="object" class="slideUp">

Eso es todo, es muy fácil y el resultado se ve increíblemente bien.

El único detalle adicional esta relacionado a los objetos que deben aparecer con una animación, estos deben contener visibility:hidden;

#object{ background-color: #fe5652; visibility: hidden; }

Combinar CSS3 y jQuery:

Por defecto todas las animaciones se disparan al cargar el documento. Sin embargo una opción para controlar el comportamiento de las distintas animaciones es combinar la potencia de CSS3 con la del framework jQuery.

<script>
$(window).scroll(function() {
    $('#animatedElement').each(function(){
       var imagePos = $(this).offset().top;
       var topOfWindow = $(window).scrollTop();
       if (imagePos < topOfWindow+400) {
          $(this).addClass("slideUp");
       }
    });
});
</script>

De esta manera estaríamos combinando la posición del scroll del navegador con la animación de un objeto. Algo muy interesante para el desarrollo de sitios del tipo “todo en una pagina”.

Este proyecto no tiene mucha ciencia lo que no quita que podamos hacer cosas muy atractivas con él. Y todo esto simplemente utilizando una hoja de estilo adicional.

Categorizado en: