JavaScript

impress( [ id ] )

A factory function that creates the ImpressAPI.

Accepts a String that represents the id of the root element in the page. If omitted, impress.js will lookup for the element with the id "impress" by default.

Example:

var impressAPI = impress( "root" );

ImpressAPI

The main impress.js API that handles common operations of impress.js, listed below.

.init()

Initializes impress.js globally in the page. Only one instance of impress.js is supported per document.

Example:

impress().init();

Triggers the impress:init event in the Root Element after the presentation is initialized.

Example:

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:init", function() {
  console.log( "Impress init" );
});
impress().init();

.tear()

Resets the DOM to its original state, as it was before init() was called.

This can be used to "unload" impress.js. A particular use case for this is, if you want to do dynamic changes to the presentation, you can do a teardown, apply changes, then call init() again. (In most cases, this will not cause flickering or other visible effects to the user, beyond the intended dynamic changes.)

Example:

impress().tear();

.next()

Navigates to the next step of the presentation using the goto() function.

Example:

var api = impress();
api.init();
api.next();

.prev()

Navigates to the previous step of the presentation using the goto() function.

Example:

var api = impress();
api.init();
api.prev();

.goto( stepIndex | stepElementId | stepElement, [ duration ] )

Accepts a Number that represents the step index.

Navigates to the step given the provided step index.

Example:

var api = impress();
api.init();
api.goto(7);

Accepts a String that represents the Step Element id.

Navigates to the step given the provided Step Element id.

Example:

var api = impress();
api.init();
api.goto( "overview" );

Accepts an HTMLElement that represents the Step Element.

Navigates to the step given the provided Step Element.

Example:

var overview = document.getElementById( "overview" );
var api = impress();
api.init();
api.goto( overview );

Accepts an optional Number in the last argument that represents the duration of the transition in milliseconds. If not provided, the default transition duration for the presentation will be used.

Triggers the impress:stepenter event in the Root Element when the presentation navigates to the target Step Element.

Example:

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:stepenter", function(event) {
  var currentStep = event.target;
  console.log( "Entered the Step Element '" + currentStep.id + "'" );
});

Triggers the impress:stepleave event in the Root Element when the presentation navigates away from the current Step Element.

Example:

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:stepleave", function(event) {
  var currentStep = event.target;
  var nextStep = event.detail.next;
  console.log( "Left the Step Element '" + currentStep.id + "' and about to enter '" + nextStep.id );
});

Improve The Docs

Did you find something that can be improved? Then