Cool Presentation Library With JavaScript And Animate.css – Impresi.js

Impresi.js is a JavaScript library for creating a dynamic, interactive presentation for the web.

Animated with the Animate.css library. Click on the screen and use the arrow keys to navigate between slides.

Basic:

Installation & download.

# NPM
$ npm install impresi --save

Import the Impresi.js library into the document.

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

Or from a CDN.

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

Create a container in which you want to place the presentation slides.

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

Define your slides in JavaScript objects as follows:

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] }
    ]
};

Initialize the presentation library and done.

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

Start the presentation. That’s it.

impresi.start();

Changelog:

06/28/2019

• Added back button functionality