Examples and demos

Pedro Boueke edited this page May 23, 2018 · 250 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: Free Symfony 3 small application that allows to create Impress.js presentations based on a simple yml file.
Orbitale.io EasyImpressBundle, the Symfony bundle that is used by EasyImpress above, could be integrated in any existing Symfony3 application.

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. Hovercraft Demo

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.

Impressionist A new editor created by the current impress.js maintainer. It's very much in development, but recently reached a state where you can actually save what you're doing.

  • 3D WYSIWYG editor
  • Based on Electron and TinyMCE, this editor runs on your workstation, not as a web service.
  • Uses and extends impress.js itself to make presentations editable

Prezent3D: A commercial and web based presentation creator, obviously based on impress.js 0.6 or so.

Other Tools & Plugins

react-impress: Rewrite Impress.js presentation framework for React & JSX

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.

React-impressJS: Pure react Component of impress.js. NPM install

impressPlayer: Standalone impress.js player with console (similar to libreoffice impress's one). You can load .html files, .md files (markpress version) or .zip files (single archive presentation with style.css, impress.md, images and videos).

Presentations

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 by Joakim Kemeny @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] (http://www.toforge.com/wp-content/impressjs_amazonaws_cubes/index.html#/start) by Mauro Rocco - A nice experience on building the Amazon AWS logo using Impress.js

[Demo in italiano] (http://www.xenialab.it/meo/web/white/internet/impressjs.htm#/bored) 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

Network Science - in 5 minutes by @pboueke

¯\(ツ) by @pboueke

Websites and portfolios

Sevensoft.com by Ryan D. Marshall. Profile site for a company based in Seattle. For modern browsers, content is displayed in all 3 dimensions in relation to a standing image of the author. Camera angles move from above, behind and geometrically around the author. For browsers with only 2D support, the content is presented as a 'wall' around the author.

SoheilShiri.ir by @SoheilShiri

[Es lebe der Koenig] (http://www.eslebederkoenig.com) Website for the "Es lebe der Koenig" literature event. The website was produced by [Blue Wave] (http://www.blue-wave.de) from Blue Wave's [Creators] (http://creator.blue-wave.de). Blue Wave turned the website into an interactive touchscreen installation at the event (https://youtu.be/yxloMxlisvQ). [@BlueWaveUG] (http://twitter.com/bluewaveug).

Tarjomyar Landing Page for "Tarjomyar" CAT tool produced by Targoman Intelligent Processing Pjc.. Combines both impress.js and HTML+Css3 3D-Effects in order to promote and explain the product. Site language is Persian.

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 by 1Devs

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] (http://www.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 - 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] (http://mohdaslam.com/arpit/#/bored) by @Arpit

[howard roark laughed] (http://howardroarklaughed.org) - company website with using mouse scroll

SteamPrez - automatically create dynamic presentations using your Steam profile information

[Hiram E. Perez website] (http://hiramperez.net) by @driverInside

Nishant Neeraj's website by @naishe

Joan Gamell's Resume and Portfolio by gamell

Cuba en el Centro by 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

Contribute

[CSS animation] (http://db.tt/0uYicjlM) by Jivan Shrestha(http://jivanshr.com.np) A short presentation to design team

[CSS basics for .net developers] (http://db.tt/aB6hb2h7) 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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.