ElementTransitions.js es una pequeña biblioteca JavaScript para aplicar, de manera sencilla, transiciones utilizando principalmente propiedades CSS3.
La gran ventaja que representa la utilización de esta biblioteca es la de simplificar y agilizar el desarrollo de sitios que utilicen transiciones CSS3 para animar su contenido, brindando de manera sencilla al diseñador una serie de recursos para darle vida a sus interfaces.
Los requerimientos son mínimos, por un lado ademas de la biblioteca elementTransitions.js vamos a necesitar del framework jQuery, y por otro la única limitación es la que viene de mano de los navegadores y su compatibilidad con las propiedades más modernas de CSS3.
La compatibilidad con los distintos navegadores es muy buena, estamos hablando de un recurso que funciona perfectamente en la mayoría de los navegadores modernos, por ejemplo no tendremos inconvenientes con Firefox, Chrome, Opera y Safari, lamentablemente los problemas comenzaran a emerger cuando el navegador utilizado sea Internet Explorer, especialmente en las versiones más antiguas.
Ejemplo de uso:
Incorporamos las bibliotecas (CSS/JS) a nuestro proyecto:
<script src="jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="elementTransitions.css" /> <script src="elementTransitions.js"></script>
Creamos una estructura HTML compatible:
<div class="et-wrapper et-rotate" et-out="scaleDown"
et-in="scaleUpDown delay300">
<div class="et-page">
<h5>In:</h5>
scaleUpDown delay300
<h5>Out:</h5>
scaleDown
</div>
<div class="et-page">
<h5>In:</h5>
scaleUpDown delay300
<h5>Out:</h5>
scaleDown
</div>
<div class="et-page">
<h5>In:</h5>
scaleUpDown delay300
<h5>Out:</h5>
scaleDown
</div>
</div>
Con este código veremos una div que ejecuta una transición con un bonito efecto cada vez que hagamos click sobre ella.
En el sitio oficial del proyecto pueden encontrar una completa guia de uso y muchísimos ejemplos.
