DOCSEARCHbyAlgolia
Submit Docs

impress.js Presentation Framework

repository·master·Indexed 12 days ago

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

A presentation framework based on CSS3 transforms and transitions in modern browsers, inspired by Prezi. It enables the creation of non-linear, spatial 3D-style slide decks directly in the browser. Version 1.1.0 supports a variety of plugins including Autoplay, Blackout, Bookmark, Form, Fullscreen, and Goto for advanced navigation.

Tokens
22.7K
Snippets
75
Records
105
Agent score
96%

What's inside impress.js

  1. Understand the Navigation plugin architecture

    master
    The Navigation plugin is an '_init plugin' that is separate from the impress.js core. It works by listening for the impress:init event. Once triggered, the plugin initializes its functionality (such as keypress and mouse event listeners) and uses the public impress.js API methods like next() and prev() to control presentation flow.

  2. Browser requirements and compatibility

    master

    impress.js relies heavily on modern CSS3 and DOM features. It does not use jQuery or other libraries to maintain compatibility.

    Required Browser Features:

    • DataSet API
    • ClassList API
    • CSS 3D Transforms
    • CSS Transitions

    Recent versions of Chrome and Firefox are recommended. While IE is reported to work, the framework is designed for modern browsers that support the features listed above.

  3. Style Steps using 4D States and Active Classes

    master

    impress.js automatically manages CSS classes on Step Elements to reflect their lifecycle and visibility. You can use these to trigger animations or change styles as the user navigates.

    4D States

    • .future: Applied to steps not yet visited.
    • .present: Applied to the step currently at the center of the camera.
    • .past: Applied to steps already visited.

    Active Step

    • .active: Applied to the step currently visible at the center of the camera.
    • body.impress-on-[id]: The body element receives a class named after the active step's ID. This is the recommended way to apply global styles based on the current slide.
    /* Animate elements only when the slide is active */
.present .rotating {
  transform: rotate(-10deg);
  transition-delay: 0.25s;
}

/* Global styling based on the active step ID */
.impress-on-overview .step {
    opacity: 1;
    cursor: pointer;
}

.impress-on-step-1 {
  background: LightBlue;
}

  4. Create and position slides using data attributes

    master

    Slides are created by adding div elements with the class step. To prevent slides from stacking and to position them in 3D space, use data-* attributes.

    Important: All data-* attribute values must be passed as Strings (enclosed in quotes). Do not apply positioning or rotation directly to the step div via CSS; always use the data-* attributes for the step element itself.

    <div class="step" data-x="1000" data-y="1000" data-z="-1000" data-scale="2" data-rotate-z="90">
    <div class="yourSubClassNameHere">
        <h1>Powerful, yet still simple</h1>
    </div>
</div>

  5. Understand the impress.js plugin system

    master

    impress.js uses a plugin-based architecture to extend functionality. There are two main types of plugins:

    1. Default Plugins: Distributed with the core library and enabled by default. They are located in the src/plugins/ directory. Most require user interaction or specific HTML attributes to activate (e.g., the autoplay plugin looks for data-autoplay).
    2. Extra Addons: 3rd-party plugins collected in the impress-extras repository. These are not activated by default and must be included manually via <script> tags. If you use git clone --recursive, they are available locally but still require manual inclusion in your HTML.

    Key Concept: Namespacing

    • Inside the div#impress root: Use the plugin name directly for attributes (e.g., data-autoplay="5").
    • Outside the root: Use the impress- prefix for IDs and classes (e.g., <div id="impress-toolbar">).
    • Events: Use the impress:pluginname prefix.

  6. Use the Form plugin to support input elements

    master

    The Form plugin provides functionality to better support interactive elements like <input>, <textarea>, and <button> within an impress.js presentation.

    It performs two primary automated tasks:

    1. Prevents accidental command triggers: It sets stopPropagation on elements that accept text input. This ensures that typing characters (e.g., pressing 'P') into a form field does not trigger the impress.js presenter console.
    2. Manages focus on step changes: It listens for the impress:stepleave event to de-focus any potentially active elements. This prevents a user from accidentally typing into a form element that is no longer visible on the screen after a transition.

  7. Configure slide list labels in Navigation UI

    master

    When using the Navigation UI plugin, the list used to select slide numbers determines its content based on element attributes.

    For each slide element, the plugin looks for the title attribute to use as the label in the selection list. If no title attribute is provided, the plugin falls back to using the element's id.

    <!-- Example of a slide with a custom label in the navigation list -->
<div id="slide-1" title="Introduction" class="step">...

<!-- Example of a slide using the ID as the label -->
<div id="slide-2" class="step">...

  8. Configure `data-rel-position="relative"` for easier layout

    master

    By default, data-rel-position is set to "absolute". In this mode, data-rel-x/y/z values are treated as world coordinates, meaning you must account for the rotation of the previous slide when calculating offsets.

    Setting data-rel-position="relative" changes this behavior: the plugin calculates the actual position based on the previous slide's rotation and position. This allows you to set offsets as if the previous slide had no rotation.

    Example: If you want a slide to appear 1000px to the right of the previous slide, regardless of whether the previous slide is rotated 90 degrees, use data-rel-position="relative" and data-rel-x="1000".

    <div class="step" data-rel-position="relative" data-rel-x="1000">

  9. Implement a GUI Plugin

    master

    A GUI Plugin is a special type of init plugin that exposes visible widgets (like buttons or progress bars).

    Best Practices:

    1. Do not inject HTML/CSS/Images directly: Default plugins are not allowed to include these files. Everything must be generated via JavaScript.
    2. Use User-Provided Containers: Instead of injecting elements, ask the user to provide a container with the plugin's namespace ID. This allows users to theme the UI with their own CSS.

    Example Pattern: Users should add: <div id="impress-plugina"></div> Your plugin then targets that ID to render its UI.

  11. Use the Substep Plugin to reveal elements sequentially

    master

    The Substep Plugin allows you to reveal elements (like bullet points) within a single step one by one, mimicking PowerPoint-style animations.

    When a step contains elements with the class substep, calls to next() or prev() will cycle through these substeps instead of moving to the next or previous slide. The slide only transitions once all substeps have been revealed (for next()) or hidden (for prev()).

    Note: Calls to goto() bypass the substep logic and transition immediately to the target step.

    <style type="text/css">
    /* Define how hidden and visible substeps look */
    .substep { opacity: 0; }
    .substep.substep-visible { opacity: 1; transition: opacity 1s; }
</style>

<div class="step">
    <h1>Fruits</h1>
    <p class="substep">Orange</p>
    <p class="substep">Apple</p>
</div>

  12. Configure the impress.js Root Element

    master

    The Root Element is the container for your entire presentation. All content is created inside this element. You should use data-* attributes on this element to define the presentation's global properties like target resolution, scaling limits, and transition speed.

    Important CSS Note: Because all steps are wrapped in a 0-size div, you must use pixel values (not relative values like width: 100%) for the dimensions of your step elements. These pixel values should correspond to the data-width and data-height you define on the root element.

    To target HD screens (the modern default), use the default values or specify them explicitly. To revert to the legacy v1.2.0 resolution (1024x768), you must set the attributes manually.

    <div id="impress"
    data-transition-duration="1000"
    data-width="1024"
    data-height="768"
    data-max-scale="3"
    data-min-scale="0"
    data-perspective="1000"
    data-autoplay="7">
    <!-- Steps go here -->
</div>