animatedModal.js : Plugin jQuery para animar transiciones a pantalla completa

por .

Hoy día, quería comentarles sobre animatedModal.js. Se trata de un bonito recurso para animar transiciones de nuestro sitio a pantalla completa. Utiliza el framework jQuery y aprovecha la potencia de CSS3 para generar los distintos y llamativos efectos.

Una de las ventajas de este recurso es que puede funcionar perfectamente con otros proyectos. Esto es, por ejemplo, con animate.css. De esta forma se combinan los distintos tipos de animaciones. En caso de querer una animación personalizada se puede aplicar perfectamente una generada por nosotros mismos sin demasiadas complicaciones.

animar transiciones a pantalla completa

Animar transiciones con animatedModal.js

Para emplear este proyecto vamos a tener agregar primero la hoja de estilo que contiene las animaciones.

<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>

Luego agregar la estructura HTML a nuestro sitio:

<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>

<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>

<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
</body>

Al final de nuestro agregar las bibliotecas JavaScript.

<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>
</body>

Y por último inicializar el plugin.

<script>
$("#demo01").animatedModal();
</script>

Este proyecto es compatible con todos los navegadores modernos: Firefox, Chrome, Safari e Internet explorer 10+.

Los invito a visitar animatedModal.js para leer más acerca de este proyecto, además van a encontrar varios ejemplos para ver en funcionamiento esta muy buen plugin.

Web: animatedModal.js

Categorizado en: