jQuery Plugins Categories

Animation Carousel Chart & Graph CSS3 Date & Time Drag & Drop Effects Form Elements Gallery Grid & Layout HTML5 Maps Media Menu Mobile Modal & Overlay Responsive Scroll Slider Social Table Tabs Text & String Tooltip Zoom Other


Making Impressive Presentations using impress.js

When we talk about online presentations, we generally think of software tools like Prezi, Brainshark and SlideRocket. I personally use some of these applications on my iPad when I need to create a great looking presentation that I can later share with my audiences. With almost everything now running inside a browser, how about a tool that lets you create presentations that do exactly that? Introducing impress.js, a JavaScript library that lets you create amazing presentations using CSS3, JavaScript and JQuery.

Impress.js gives you a non-traditional way of creating presentations that is nothing close to what you are used to on PowerPoint. You can, for example, rotate text at 90 degrees, zoom in, and use flashy 3D effects to make your presentations come alive. By simply using HTML, JavaScript and CSS3, you can create your very own presentations that can either be run as standalones inside a browser, or embedded on websites.
Let us see how you can go about using impress.js:

The HTML:

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:

  1. <div>  
  2. <h1>impress.js</h1>  
  3. <div class =“step one slide” data-x =“0″ data-y =“500″>  
  4. <img src =“i/image.gif” title =“David” alt =“David” align =“center” width =“500″ /></p>  
  5. <a href =“index.html”> My Personal Website<a/a></p>  
  6. </div>  
  7. </div>  

 

 

The CSS:

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.

The JavaScript:

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.

Related posts:


About the Author

David Gitonga is a freelance technology writer who creates content for various websites. He is an avid reader and writer and explores the different aspects of technology. He covers tech trends, innovations and new tools and runs the website http://freelancecontentcreator.com. You can reach David at davgit[@]gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>