Author: | richjava |
---|---|
Views Total: | 712 views |
Official Page: | Go to website |
Last Update: | June 28, 2019 |
License: | MIT |
Preview:

Description:
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