impress.js — Stunning CSS3 Presentation Framework

Introduction

impress.js is a presentation framework built on the power of CSS3 transforms and transitions in modern browsers. It breaks free from the linear slide-by-slide model, letting you position content freely in 3D space and animate between views with smooth camera-like movements.

What impress.js Does

• Positions presentation steps anywhere in 3D space using translate and rotate transforms
• Animates transitions between steps with smooth CSS3 transitions
• Supports scaling, rotation, and perspective effects per step
• Provides a simple HTML data-attribute API for defining step positions
• Works entirely client-side with no build tools or server required

Architecture Overview

impress.js reads HTML elements marked with a step class inside a root container. Each step declares its position, rotation, and scale via data-* attributes. The engine calculates CSS transform matrices and applies them to a camera wrapper element, creating the illusion of flying through a 3D canvas. The core is a single JavaScript file with no external dependencies.

Self-Hosting & Configuration

• Clone the repository and serve index.html with any static server
• Each step element uses data-x, data-y, data-z for positioning
• Add data-rotate-x, data-rotate-y, data-rotate-z for 3D rotations
• Use data-scale to zoom in or out on individual steps
• Customize transitions with CSS overrides on .impress-enabled classes

Key Features

• Zero dependencies and no build step required
• Full 3D positioning with perspective and depth
• Keyboard, mouse, and touch navigation built in
• Plugin system for extras like autoplay, navigation UI, and speaker notes
• Small footprint suitable for embedding in any web project

Comparison with Similar Tools

• reveal.js — Linear slide model with optional 2D grid; impress.js offers true 3D positioning
• Slidev — Markdown-driven with Vue components; impress.js is pure HTML and CSS
• Marp — Converts Markdown to PDF slides; impress.js focuses on live browser presentations
• Prezi — Commercial product with similar 3D canvas; impress.js is fully open source

FAQ

Q: Does impress.js work on mobile devices? A: Yes, modern mobile browsers support the required CSS3 transforms. Touch navigation is built in.

Q: Can I use Markdown for content? A: impress.js uses raw HTML. You can pre-process Markdown to HTML and embed it in step elements.

Q: How do I add speaker notes? A: The speaker-notes plugin reads content from a notes element inside each step and displays it in a separate window.

Q: Is there a WYSIWYG editor? A: Community tools like Strut and Hovercraft provide visual or reStructuredText authoring on top of impress.js.

Sources

• https://github.com/impress/impress.js
• https://impress.js.org