Examples and demos

Jenil Gogari edited this page Jan 6, 2017 · 227 revisions

Official demo

impress.js demo by @bartaz

Authoring tools

Those are the most usable authoring tools right now. More on the authoring tool issue.

Orbitale.io EasyImpress (v1): Free PHP-Silex application that allows to create Impress.js presentations based on a simple yml file.
Orbitale.io EasyImpress (v2): Free Symfony 3.1 small application that allows to create Impress.js presentations based on a simple yml file.

Strut (source): Clean extendable code base, fully client-side.

Slide Show(S9) with impress.js Template Pack (source): Lets you write your impress.js slides in Markdown or Textile. Uses the Slide Show (S9) Ruby gem to generate your deck.

hovercraft! (source): Lets you write your impress.js slides in rst (reStructuredText). Very good positioning and transformation support. It even provides a presenter console with a preview of the next slide, a timer and notes which are fetched directly from the slides sources.

Circular Slides Generator: Generates circular slides for impress.js presentations.

Graph / Tree Slide Generator: Uses the igraph library in R to generate optimally positioned graphs from given connectivities and generates a presentation from these results.

Beethoven: Semi graphical user interface for creating impress.js presentations. Has only basic methods, but still under development (not very intuitive...).

XMLimpress: Generates impress.js presentations with predesigned transitions from an XML file.

SDL Tridion CMS Integration The DXA Impress module adds the impress.js presentation framework into DXA, so you can create and publish presentations directly from SDL Tridion. The Impress module demonstrates how a DXA module can have its own HTML design, for more details on this, you should take a look at the impress-html-design.zip in 100 Master\Building Blocks\Modules\Impress\Admin.

Imprezi Visual editor for Impress.js presentations

markpress: Command line tool and node package to convert markdown files into self-contained impressjs presentations.

[ Oi ]: A WYSIWYG Editor to create slides in impress.js, this editor create by React and Redux.

ShowPreper: Yet another FOSS WYSIWYG fully client-side editor for both impress.js and bespoke.js - inspired by Strut. Source code.

Other Tools & Plugins

impress-full: Full impress with new abilities like background color's attributes and animations.

impress-console: A speaker console with notes, preview and timers for impress.js.

impress.js-progress: A small addition to impress.js which allows you to have a progressbar and/or the current step number and total steps.

impress_ar.js: An arabic version of impress.js, adding support for language written in a Right-To-Left (RTL) direction.

impress-audio.js: Small addition to impress.js to allow for html5 audio in your presentation

impressjs2pdf: Converts impress.js presentations (must be written using xhtml) to pdf.

impress-polygon: Create simple slideshows with slides arranged on edges of a regular polygon.

decktape: PDF exporter for HTML presentations that supports impress.js.


Demos and real world presentations by henrikingo (@h_ingo on Twitter):

Git from the inside an introduction into git with lots of SVG images and Grunt build script.

Slide Deck by Tony Spiro - basic example that shows how you can control everything in your slide deck from the Cosmic JS content management platform.

Learning to Design by Parhum Khoshbakht

Bytecode manipulation with cglib and ASM by Pawel Koperek

Pirate Party Programme by @317070

dreszler-development by dreszler-development

Hashdog: Software Factory - Brochure by Franco Alvarez

CSS 3D transforms from meet.js summit by @bartaz

Freelancing - My story by @Valeka

Speeding Up Drupal by Evan Willhite @evanmwillhite

[An app is not enough](http://joakimkemeny.github.com/presentation.responsive) by Joakim Kemeny [@joakimkemeny](https://twitter.com/joakimkemeny)

What the Heck is Responsive Web Design by John Polacek @johnpolacek

Web Application Project Workflow by Heath Dutton @heathdutton

Asynchronous JavaScript by Mariusz Nowak @medikoo

Bonne année 2012 by Edouard Cunibil @DuaelFr

Careers in Free and Open Source Software by Exequiel Ceasar Navarrete @exi_navarrete

HTML5 Future : to infinity and beyond! by Sylvain Weber @sylvainw

WordPress 201: Performance & Security by Jason Cosper @boogah

Intro to Node.js (src) by Le Zhang @le_isms

The Revolutionary CSS3: a non-technical intro to CSS3 by Scott Cheng

Liquid Web Services by Cesare Pautasso @pautasso

Transactions for the REST of us by Cesare Pautasso and Guy Pardon

Git, the stupid content tracker, for the novice and the semi-experience git user by @chickamade

YUI3's Use and Add Methods by @klamping

Les User Agents, c'est le mal ! [fr] by Rudy Rigot

Faster HTML5 Apps from X-HTML5MAS Meetup by IndrekV

YUIConf 2012: Scaling YUI in the Enterprise by @klamping

Tomorrow's Schools by Brian E. Bennett @bennettscience

Declinul consumerismului si noua abundenta by Leeroy - a presentation about transition and collapse (in Romanian).

Kageetai Application by Kageetai Presentaion for applying at foreign companys

Testing impress.js by @manursio Just testing this awesome plugin.

Amazon AWS 3D Cubes by Mauro Rocco - A nice experience on building the Amazon AWS logo using Impress.js

Demo in italiano by Meo Bogliolo - The official demo with text translated into italian. I did not translate the comments since they are too cool to be changed...

Présentation d'IntraCherche pour le CRECE (démo en français) by [http://www.intracherche.fr)

Triangulations by Marcin Kaczmarek – Presentation of triangulation algorithms with live visializations (source).

Technical Debt by Luis Garcia Castro – (Technical Debt presentation in English and Spanish using and promoting Impress.js) (source).

Tomorrow's IT management with OpenStack, Docker & Co by Alexander Kläser - Presentation in German, held at the German OpenStack Days (Deutsche OpenStack Tage) 2015 - For the presentation I was using several graphics as sprites at different z-positions in order to create a pop up card like 3D effect :) . (The presentation is best viewed in Chrome/Chromium.)

Python Workshop by Shayan Fahimi - Presentation of a Python Workshop at University of Tehran, created by impress.js using substeps, syntax highlight and some geometrical calculations.

git - A little tale by Panagiotis Papadakos Presentation given at FORTH-ICS, Greece. Available in github (https://github.com/papadako/git-a-little-tale)

AngularJS 1.x by Khaled Mohamed

Data Compression by Khaled Mohamed

Linux Essential Presentation by mlibre

The Human Body as a Development Platform - BuzzConf 2015 by @KathyReid

Levelling up your Open Source Career - Open Source Developers' Conference 2015 by @KathyReid

Websites and portfolios

SoheilShiri.ir by @SoheilShiri

Es lebe der Koenig Website for the "Es lebe der Koenig" literature event. The website was produced by Blue Wave from Blue Wave's Creators. Blue Wave turned the website into an interactive touchscreen installation at the event (https://youtu.be/yxloMxlisvQ). @BlueWaveUG.

http://ivelina.comuv.com by Ivelina Dimitrova (ivelina.dimitrova@yahoo.com), Portfolio

jgog.in Website/Portfolio of Jenil Gogari, designer from Mumbai, India

processing.js/inspire.js demo An inspire.js page with a different processing.js sketch at each step by Jamie Waese

Biofib'isolation, une filière complète unique en Europe from Biofib'isolation by @youyouk

[Narsis Responsive 3D Personal VCard Static Template](http://1dws.com/demo/narsis-vcard/) by [1Devs](http://1devs.com)

Building a Personal Website with impress.js by Rakhitha Nimesh

Panjere Conf. 2015 by @SoheilShiri

Pongoweb.it from creators of PongoCMS Laravel bundle

Beyond Weight-Loss: Just another amateur trying to build webpage by David Meads

valeka.net by @Valeka

lioshi.com by @lioshi

alingham.com by Al Ingham @alingham

nice-shots.de by @NiceShots

museum140 Shorty Award promo video entirely made with ImpressJS by @thingsinjars

electricanimal.co.uk by @elecmal

t3kila.com by Romain Wurtz

almostcomplete.co.uk by @middlesound

iWed.in by @ManiKantaG (intro animation using impress, with some custom code for autoplay, pause & skip)

jasminehsu.net by Jasmine Hsu

luchoster.net by @luchoster

Word/For Word, a journal of new writing, issue 20 by @coreylafferty

AVA Bausoftware by ARCHITEXT Software GmbH

I hate it here (blogpost) by Kartik Prabhu

Towel Day Italy by @orazio_nelson

5 Voies de Recherche - information about breast cancer by ARC Fondation

Sibal fArts Presents Satire site by Vidyut, about an Indian Minister who has been leading legislation eroding internet rights - free speech and privacy in India. Combines with other javascript and tools.

Resume of russian programmer

Feel free to fork my resume (include printable CSS) viewable here http://jul.github.com/cv

WAMR Web Studio Overview - Overview about Products and Services of WAMR Web Studio

Tomorrow Interactive - a webdesign company based in Bucharest

Narangi Web - a new and creative web agency based in Italy - Sicily

[Great Wall of Tees](http://zovi.com/wall-t) - innovative use of impress to render a 3D art gallery for fashion e-commerce site zovi.com

Mistakopedia - seek knowledge explore/create/share search mindmaps. dynamic search page created with impress.js

Technical Skill Representation by @Arpit

howard roark laughed - company website with using mouse scroll

SteamPrez - automatically create dynamic presentations using your Steam profile information

Hiram E. Perez website by @driverInside

Nishant Neeraj's website by @naishe

Joan Gamell's Resume and Portfolio by gamell

[Cuba en el Centro](http://www.cubaenelcentro.com) by [galopez](https://github.com/galopez). This is a website about vacations in Cuba. Each one of the tours offered features an interactive view around the island. The "interactivity" is supported by the goodies of impress.js

Episode 5 of To Be Continued, webcomic by Lorenzo Ghetti, website by Carlo Trimarchi

FS Millbank. A wayfinding typeface.

Random Quote Machine Example by Ricardo Cardona R


CSS animation by Jivan Shrestha(http://jivanshr.com.np) A short presentation to design team

CSS basics for .net developers by Jivan Shrestha(http://jivanshr.com.np)

If you have used impress.js in your presentation (or website) and would like to have it listed here, feel free to edit this page.