A practical reference for building reliable decks.

Core markup

The library looks for a container identified by impress. Each child scene uses the step class. The markup can contain any valid HTML.

<div id="impress">
  <section class="step" data-x="0" data-y="0">Intro</section>
  <section class="step" data-x="1000" data-y="0">Next idea</section>
</div>

<script src="impress.js"></script>
<script>impress().init();</script>

Step attributes

Position

data-x, data-y, and data-z locate a step in 3D space. Values are unitless coordinates interpreted by the presentation engine.

Rotation

data-rotate is the common z-axis rotation. Use data-rotate-x and data-rotate-y for more explicit 3D rotation. Extreme angles can reduce readability.

Scale

data-scale changes the apparent size of a scene. Large overview scenes are useful for synthesis, while small nested scenes can reveal details.

<section class="step"
  data-x="1800"
  data-y="900"
  data-z="-500"
  data-rotate-x="12"
  data-rotate-y="-18"
  data-scale="1.4">
  ...
</section>

Canvas settings

Data attributes on the root presentation element can configure global behavior. Keep your transition duration consistent and avoid overly slow movement during information-heavy talks.

<div id="impress"
  data-width="1024"
  data-height="768"
  data-max-scale="3"
  data-min-scale="0"
  data-perspective="1000"
  data-transition-duration="900">
  ...
</div>

Core API

Initialize the deck once the DOM and library are available. The returned API object gives you direct navigation controls.

const deck = impress();
deck.init();

deck.next();
deck.prev();
deck.goto('result');

deck.tear(); // remove impress.js behavior

Use direct API calls for custom buttons, progress controls, remote interfaces, or integrations with other web components.

Events

Presentation events let you react when a step becomes active or inactive. This is useful for media playback, chart animation, analytics, or custom interface updates.

document.addEventListener('impress:stepenter', event => {
  console.log('Entered:', event.target.id);
});

document.addEventListener('impress:stepleave', event => {
  console.log('Left:', event.target.id);
});

Useful CSS classes

• .active is applied to the current step.
• .past, .present, and .future can support state-aware styling.
• .impress-enabled indicates that the enhanced presentation initialized.
• .impress-not-supported supports fallback messaging before initialization or in unsupported environments.

Keep inactive scenes visible enough to preserve spatial context, but reduce their contrast so the active content remains dominant.

Accessibility and fallbacks

• Use semantic headings and a logical DOM order, even when the visual canvas is non-linear.
• Provide sufficient contrast and avoid text that becomes too small during overview states.
• Respect reduced-motion preferences with a simplified stylesheet or lower transition duration.
• Include fallback content for unsupported browsers and a print-friendly version where practical.
• Do not rely on movement alone to communicate essential meaning.