Presentation programming interface on impress.js

impress.js is a popular framework designed to create an impressive presentation just in the browser. True, the browser for this must support CSS3 3d transformation.



A detailed analysis of the moments associated with the construction of the presentation and the display of individual slides was carried out in a previous publication . Then, beyond our attention were left the possibility of managing the presentation through the framework API. For those who do not get enough out-of-the-box features of impress.js , let ’s analyze its simple and compact API.



Recall that the framework of impress.js is designed to create presentations from slides placed in three-dimensional space and provides breathtaking 3d transformations when moving from slide to slide.



Here is a simple presentation example .

')

The whole presentation is placed in a container with id="impress" . Inside a shared container, there are separate slide containers marked with a class: class="step" . The location of the slide is set using the data- coordinate attributes: data-x , data-y , data-z and rotation (slope): data-rotate-x , data-rotate-y , data-rotate-z . In addition, for each slide can be set to scale data-attribute data-scale .



The presentation created in this way perfectly scrolls forward by pressing special keys: tab , space , right arrow, down arrow , Page Down



and back, pressing the left arrow, up arrow , page up



If there is a need to organize automatic flipping of slides at specified intervals, intercept transition events to a particular slide or otherwise expand the possibilities of working with a presentation, then here you should use the framework API .

Useful features

To access API functions, you must create an object containing these functions:

 var api = impress(); 

Now you can use the following features.

• api.init() : presentation initiation
• api.next() : go to the next step ( slide ) of the presentation
• api.prev() : go to the previous step ( slide ) of the presentation
• api.goto(id) : go to the specified step ( slide ) of the presentation, you can go by id , by step number (slide), or by the DOM element of the slide

Automatic flipping through slides

A simple endless flipping of slides , after an interval of, for example, 3 seconds:

 var interaval=setInterval( function(){ //   api.next      //   3  api.next(); },3000); 

One-time flipping through slides with a set demonstration time

 var step_transitions=[ {slide: 1, duration: 3500}, {slide: 2, duration: 3000}, {slide: 3, duration: 2500}, {slide: 4, duration: 2000}, {slide: 5, duration: 1500}, {slide: 6, duration: 1000}, {slide: 7, duration: 500}, ] var time_frame=0; step_transitions.filter(function(steps){ time_frame = time_frame + steps.duration; setTimeout(function(){ api.goto(steps.slide); }, time_frame); }); 

Event handling

Programming in JavaScript involves the use of event handlers as a useful means of controlling the program flow. The impress.js framework allows you to handle two types of special events:

1. stepenter - arises at the moment of transition to a new slide (step)
2. stepleave - occurs when leaving the next slide (step)

In a simple example, a message is displayed about the slide being abandoned and a message about the slide that is being transitioned.

 document.addEventListener('impress:stepenter', function(event){ alert( '  : ' + event.target.id ); }, false); document.addEventListener('impress:stepleave', function(event){ alert( ' : ' + event.target.id ); }, false); 

Here is the whole simple toolkit for programming presentations of impress.js:

• 4 functions: init () , next () , prev () , goto (id) ;
• 2 events: stepenter , stepleave ;

But it is quite enough to build a slider or implement additional actions when moving from slide to slide.