Presentation programming interface on impress.js

  • Tutorial
image
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, there remained the possibility of managing the presentation through the framework API. For those who have few impress.js features that are available “out of the box” , we will analyze its simple and compact API.

Recall that the impress.js framework 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 entire presentation is placed in a container in which id="impress". Within a common container, the containers are placed individual slides marked class: class="step". Location of the slide is defined by means data-of coordinates attributes: data-x, data-y, data-zand rotation (tilt): data-rotate-x, data-rotate-y, data-rotate-z. In addition, each slide can be scaled with a data attribute data-scale.

Established thus presented beautifully scrolled forward by pressing the special keys: Tab , space , right arrow , down arrow , Page Down The

back and pressingleft arrow , up arrow , Page the Up

If there is a need to organize the automatic scrolling slides at preset intervals, intercepting transition event to a particular slide or otherwise enhance the ability to work with presentation here should use the API framework.

Useful features


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

var api = impress();

Now you can use the following functions
  • api.init(): presentation presentation
  • 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): Moves to the specified step ( slide ) presentation, you can go to id , at number step (slide), or DOM-element slide

Automatic slide turning


Simple endless flipping through slides , after a gap of, for example, 3 seconds:

var interaval=setInterval( function(){ 
  // используем функцию api.next для прехода к следующему слайду
  // через каждые 3 секунды
  api.next();
},3000);

One-time slide flick with preset demo 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


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

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

In a simple example, a message is displayed about the slide to be left and a message about the slide to which you are switching.

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 impress.js presentations:

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

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

Also popular now: