Let us see how you can go about using impress.js:
This consists of the index file which includes the class name “impress” where all the slides of your presentation are nested. Each div inside this class name is named “step”. Going further inside, you will see x and y attributes where you can specify the positioning for each step. You can also include images and links to other websites if you want as shown in the slide below:
- <div class =“step one slide” data-x =“0” data-y =“500”>
- <img src =“i/image.gif” title =“David” alt =“David” align =“center” width =“500” /></p>
- <a href =“index.html”> My Personal Website<a/a></p>
The impress-demo.css file can be used to change a number of features of your presentation, most notably, the text color, background, and the opacity and positioning of each slide. Similar to other stylesheets, impress-demo.css can be edited or removed and replaced to reflect your own set of styles that you want for you presentations.
Impress.js is the most important file of the library and responsible for how things work. It is the cog that animates and moves your presentations forward. This is the actual script and you are likely not going to edit or modify this file. You can check out the source code documentation, which is inside the impress.js file, showing how each section works and what the script is capable of doing when you are making modifications.
There are many available tools and plugins that work with impress.js to help you do a bunch of things. For example, there is a speaker console that allows you take notes, preview and add timers to your impress.js presentations. There is also a small addition that allows you to view the progress bar and see the current step and how long you have to go to the end of the presentation. In addition to the above, many creators have used impress.js, and demos can be found on websites and code repositories like Github if you are looking for a little inspiration.
Check out examples and demos on how to use impress.js from this link.