Micro-Framework para crear presentaciones con transiciones CSS3

Bespoke.js es un micro-framework para la creación de presentaciones de diapositivas utilizando CSS3 para generar la animación de diapositivas.

Su característica más importante es su sencillez, la misma queda evidenciada en su peso, apenas 1kb en su versión simplificada y comprimida mediante gzip. Además no cuenta con ninguna dependencia, para funcionar su único requerimiento es que el navegador soporte correctamente CSS3.

Utilizar las transiciones de CSS3 le permiten un tamaño reducido y mediante el uso de Javascript la perfecta detección de eventos del teclado, algo que le brinda la posibilidad de utilizar las flechas del teclado para avanzar y retroceder diapositivas de forma simple e intuitiva.

Su estructura tan simple permite que se los diseñadores puedan incorporar nuevas funcionalidades muy fácilmente.

La estructura básica HTML es la siguiente:

<link rel="stylesheet" href="path/to/my/theme.css">

<article>
  <section>Slide 1</section>
  <section>Slide 2</section>
  <section>Slide 3</section>
</article>

<script src="bespoke.min.js"></script>
<script src="path/to/my/script.js"></script>

Luego podemos decidir como inicializar el plugin, según como lo hagamos podremos decidir si el slider funciona de forma horizontal o vertical.

Inicialización de la representación en modo horizontal:

bespoke.horizontal.from('article');

Más claro imposible 😀

En la documentación oficial pueden encontrar más opciones de configuración. También podemos decidir lanzar determinado evento en x diapositiva, esta opción es de lo más interesante para aquellos que busquen realizar una presentación más interactiva.

Web: Bespoke.js