Presentations Based on HTML/Javascript: 8 Tools Perfect for Web Designer

What-The-Heck-Is-Responsive-Web-Design.png

Powerpoint is not that powerful any more. Online presentation tools like Prezi can empower you to impress your audience even better. The page transitions and animation effects could make the best visual guidance to focus on whatever you’d like to focus on.

As for web designers that make presentations actually about things like HTML/CSS/Javascript, why not make the presentations by those things? The following tools could help you to create dynamic slides with ton of customisations, or simple slides sits in a web page. The only limitation is the imagination.

Impress.js (Demo)

Online Presentation Tools based on HTML and Javascript
It’s a presentation tool inspired by the idea behind Prezi and based on the power of CSS3 transforms and transitions in modern browsers(Except Opera and IE6-9) and mobile ones on iPad and Blackberry Playbook. You can view the demo and the how-to is actually the HTML code with many useful comments to help you get started.

You can have a look at many presentation examples used impress.js. Following one is called What The Heck Is Responsive Web Design.
Online Presentation Tools based on HTML and Javascript

Reveal.js (Demo)

Online Presentation Tools based on HTML and Javascript
Reveal.js utilises CSS 3D transforms as well but not that “crazy” like impress.js. The best thing is it includes horizontal slides and vertical slides to effectively display the structure of points and ideas.

Deck.js (Demo)

Online Presentation Tools based on HTML and Javascript
Deck.js is a very powerful presentation framework. It’s more like writing your own HTML page and combining as a whole. The CSS controls each slide’s state. If you also know javascript, the built-in API includes many events to have more control of it.

Scrolldeck.js (Demo)

Online Presentation Tools based on HTML and Javascript
Scrolldeck is inspired by deck.js and reveal.js that pretty much says what’s it about. I feel it is more straightforward to use scrolldeck. It provides animations of “fly-in-left”, “fly-in-right”,
“space-in” and the default is “fade-in”. Each slide is a div and you use arrow key to control. You got the idea.

Fathom.js (Demo)

Online Presentation Tools based on HTML and Javascript
The basic idea of Fathom.js is almost same as scrolldeck, but it has ton of functions for you to configure. The demo is simple but doesn’t mean it’s not a powerful tool.

CSSS Slideshow (Demo)

Online Presentation Tools based on HTML and Javascript
From the demo we can see it’s like a page-to-page powerpoint in a web page. Yes, like the previous ones, it uses one HTML file as slides and CSS to control. It does not contain many functions like deck and fathom but a simple framework you can actually quickly adapt.

Slide Presentation Framework (Demo)

Online Presentation Tools based on HTML and Javascript
The name say it all. It uses slides in plain HTML, combined with themes, layouts, and slide transitions in CSS, and a small Javascript MVC framework for showing them.

Shower Presentation Template (Demo)

Online Presentation Tools based on HTML and Javascript
Besides the normal presentation, it enables the preview of all slides which you can use “Enter” and “ESC” to quickly select.
MedleyWeb.com

Leave a Comment