Animar la transición entre secciones nunca fue más sencillo, Animsition es un plugin jQuery escrito en JavaScript que aprovecha al máximo las propiedades de CSS3 para lograr un bonito efecto al momento de saltar de una pagina a otra.
La idea de este proyecto es la de mejorar la experiencia del usuario brindando transiciones entre paginas mucho más fluidas y amenas, además de obviamente más atractivas visualmente hablando. En total este proyecto cuenta con 18 diferentes animaciones.
Si hablamos de compatibilidad, Animsition es compatible con la mayoría de los navegadores modernos que aceptan CSS3, la biblioteca se encuentra probada en: Internet Explorer 10+, Safari, Chrome, Firefox y Opera.
La instalación es muy simple y no es distinta a la de cualquier otro plugin jQuery, primero debemos incluir en nuestro proyecto la biblioteca de Animsition y su hoja de estilo.
<!-- animsition CSS --> <link rel="stylesheet" href="./css/animsition.min.css"> <!-- vendor js --> <script src="jquery.min.js"></script> <!-- animsition js --> <script src="jquery.animsition.min.js"></script>
Luego agregamos las clases a los enlaces a los que les queremos implementar la animación.
<body> <div class="animsition"> <a href="./page1" class="animsition-link">animsition link 1</a> <a href="./page2" class="animsition-link">animsition link 2</a> </div> </body>
Si queremos lograr una animación distinta en cada uno de los enlaces podemos utilizar las etiquetas extendidas data-Animsition, por ejemplo.
<a href="./page1" class="animsition-link" data-animsition-out="flip-out-y" data-animsition-out-duration="2000" > animsition link 1 </a> <a href="./page2" class="animsition-link" data-animsition-out="rotate-out" data-animsition-out-duration="500" > animsition link 2 </a>
Por ultimo inicializamos el plugin:
$(document).ready(function() { $(".animsition").animsition({ inClass : 'fade-in', outClass : 'fade-out', inDuration : 1500, outDuration : 800, linkElement : '.animsition-link', // e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])' touchSupport : true, loading : true, loadingParentElement : 'body', //animsition wrapper element loadingClass : 'animsition-loading', unSupportCss : [ 'animation-duration', '-webkit-animation-duration', '-o-animation-duration' ] }); });
Como podrán observar no es complicado. Un detalle importante es que implementar esta solución no alterna la estructura de enlaces de nuestro proyecto, por lo que no vamos a recibir ningún tipo de penalización por parte de los buscadores.
En el sitio del proyecto hay ejemplos, los invito a visitar Animsition.