Jack in The box es un recurso bastante nuevo e interesante para controlar la forma en que reproducimos las animaciones realizadas con CSS según la posición de la barra de desplazamiento del navegador.
Animar elementos a medida que el usuario utiliza el scroll es algo que se puso muy de moda estos últimos dos años, realizar este tipo de implementaciones puede resultar muy difícil si desarrollamos desde cero, sin embargo gracias a trabajos como Jack in The box lograrlo puede llevar unos pocos minutos.
Otro aspecto importante y relacionado a las animaciones en sí es que esta pequeña biblioteca JavaScript utiliza animate.css, recurso para crear animaciones empleando solamente CSS y del que ya hablamos hace tiempo en este blog. No obstante podemos incluir nuestras propias animaciones empleando el mecanismo designado por el autor de este recurso.
A diferencia de otras alternativas como Scrollorama esta biblioteca cuenta con la ventaja de su peso, unos muy pocos kb’s y dependencias mínimas (jQuery y animate.css).
Ejemplo de uso:
HTML:
<section class="box slideInLeft"></section> <section class="box slideInRight"></section>
JavaScript:
$('body').jackInTheBox();
Si desean probar este recurso simplemente deben descargar el proyecto desde su apartado oficial en Github, el mismo incluye una demostración complemente funcional.
El único punto negativo es el referido a la visualización de las animaciones en dispositivos móviles. El autor decidió que por defecto que las animaciones no sean ejecutadas en móviles para evitar empobrecer la experiencia del usuario.
Jack in the Box se encuentra liberado bajo licencia MIT: uso libre tanto en proyectos personales como comerciales.
