Web Development

9 Web Based Solution to Create Stunning Slideshows Presentation

Written by Kevin Liew on 15 Jul 2014
42,618 Views • Shares
0 comments

When it comes to presentation, we always think of PowerPoint or Keynote. Do you know you can create stunning presentation slideshow using web based technologies as well? What can be done on those presentation applications can also be done on browsers.

We have HTML5, CSS3 and Javascript. Just like building websites, we can integrate multimedia such as photo, video and audio into HTML slideshows. With the power of CSS3 and Javascript, we can create stunning slide transitions that you can't find in powerpoint or keynote.

I can think of three advantages:

  • Cross platform: As long as you have modern browsers such as Chrome, you'll able to run the presentation. You can run it in any computers.
  • Availability: Forget about thumb drive, you can upload your slideshow online and view it everywhere as long as there's Internet
  • Open source: Unlike Powerpoint and keynote, you don't have to pay a cent to create a good looking presentation.

So, here we have 9 alternative web based presentation solutions that you can use it for absolutely free. Though it's free, you might have a steep learning curve if you're not familiar with HTML & CSS.

Ancesor.js

Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system. It includes many options, pubic methods and events for customization. It also support mobile swipe in the latest version. Looking at its demo, somehow, Ancessor is quite similar to Ariel Flesler's scrollTo plugin.

&nsbp;

Reveal.js

Created by Hakim, who made a bunch of cool stuff. reveal.js is a framework for easily creating beautiful presentations using HTML. reveal.js comes with a broad range of features including nested slides, markdown contents, PDF export, speaker notes and a JavaScript API. It's best viewed in a browser with support for CSS 3D transforms but fallbacks are available to make sure your presentation can still be viewed elsewhere.

&nsbp;

IO 2012 Slides

Don't let the year midlead you, this slide deck has been updated since 2012. A presentation slideshow resemble of Google I/O slides. You can generate the slides with Markdown.

&nsbp;

Slides

You don't need Powerpoint and Keynote to make and give presentations. This framework uses slides in plain HTML, combined with themes, layouts, and slide transitions in CSS, and a small Javascript MVC framework for showing them. You'll need node and npm to run it.

&nsbp;

CSSS

Created by Lea Verou, CSSS (implied by its name) is a CSS presentation slideshow. It's not fully CSS based, minimal Javascript is used to manage the navigation part. She used this in hers presentation back in 2010.

&nsbp;

Deck.js

A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.

&nsbp;

Flowtime.js

Flowtime.js is a framework for easily build HTML presentations or websites. Flowtime.js is the slide engine used by SlideCaptain. If you prefer a WYSIWYG editor or you feel not comfortable with plain HTML you can try SlideCaptain: a powerful web app for building well-structured presentations in your browser.

&nsbp;

Jmpress.js

A jQuery plugin to build a website on the infinite canvas. Though it's labelled as JS tool for website, but you can use this script to make stunning presentation just like reveal.js.

&nsbp;

Impress.js

Impress.js a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

&nsbp;

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.