Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Animaciones CSS fáciles y rápidas

Animaciones CSS fáciles y rápidas 08.MAY.14

Alvaro José Rios Ch
Fundador WebBizarro

Las animaciones CSS son muy utilizadas actualmente para todo tipo de cosas en sitios web, es que con la llegada de HTML5 y CSS3 las cosas han cambiado para la web. Además el avance en tecnologías como OpenGL y avances en los navegadores modernos nos permiten crear cosas realmente interesantes en la Web.

Aunque no es muy difícil implementar animaciones con CSS si es un trabajo que requiere de algo de tiempo y pericia por parte del programador, por eso quiero mostrarles esta librería que les facilitará la vida. AniJS se trata de una librería para aplicar animaciones CSS a objetos en el DOM sin tener que escribir mucho código.

Para usarla simplemente debemos:

importar el JavaScript

<script src="anijs-min.js"></script>

importar el CSS

<head>
    <!-- Animate.css library -->
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
</head>

y finalmente declarar en el código Html la animación que deseamos

<body>
    <header data-anijs="if: click, do: flipInY animated, after: removeAnim">
        header
    </header>
    <nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
        nav
    </nav>
    <div id="main" data-anijs="if: DOMContentLoaded, on: document, do: swing animated">
        DOMContentLoaded
    </div>
    <footer>
        footer
    </footer>
</body>

La estructura que debemos seguir es if (algún evento como click o mouseover), On algún elemento (selector CSS), Do (la animación que deseas asignar) To el elemento que vas a animar (selector CSS). Esta es la estructura básica pero puedes usar opciones como before o after para ejecutar acciones antes y después de las animaciones o crear tus propios helpers para ejecutar acciones personalizada