Enfriar la biblioteca de presentaciones con JavaScript y Animate. CSS-impresi. js

Vista prévia

Descripción

Impresi. js es una biblioteca de JavaScript para crear una presentación dinámica e interactiva para la Web.

Animado con el Animate. CSS biblioteca. Haga clic en la pantalla y utilice las teclas de flecha para desplazarse entre las diapositivas.

Basic:

Instalación & descarga.

# NPM
$ npm install impresi --save

Importe la biblioteca impresi. js en el documento.

<script src="lib/impresi.min.js"></script>

O de una CDN.

<script src="https://unpkg.com/impresi"></script>

Cree un contenedor en el que desee colocar las diapositivas de presentación.

<div id="example"></div>

Defina las diapositivas en los objetos de JavaScript de la siguiente manera:

let slides = {


resources: [



{




id: "s-1", // unique ID




type: "background",




options: {





backgroundColor: "#e6f7ea",





imageUrl: "/path/to/bg.jpg", // bg image





inAnimationName: "fadeIn", // animate.css animation name





x: 37, // horizontal point





y: 20
// vertical point





}



},{




id: "s-1-h-1",




type: "heading",




text: "Heading Element",




options: {





fontSize: 4, // font size





fontColor: "#fff", // font color





backgroundColor: "#333",





width: "none",





inAnimationName: "slideInUp",





x: 37,





y: 20




}



},{




id: "s-1-b-1",




type: "blurb",




text: "A blurb",




options: {





fontSize: 3, // font size





fontColor: "#fff", // font color





backgroundColor: "#333",





width: "none",





inAnimationName: "slideInUp",





x: 10,





y: 10




}



},{




id: "s-1-i-1",




type: "image",




src: "image.jpg",




options: {





width: "none",





inAnimationName: "slideInUp",





x: 10,





y: 10




}



}


],


actions: [



{ in: ["s1", "s1-h1"], out: [s1, s1-h1, s1-b1] }


]
};

Inicializar la biblioteca de presentaciones y listo.

let impresi = new Impresi("example", slides);

Inicie la presentación. Eso es todo.

impresi.start();