ValentynSolovyov Sep 21 2014 at 17:49

Интерфейс программирования презентаций на impress.js

3 min

6.4K

Tutorial

impress.js – популярный фреймворк предназначенный для создания впечатляющих презентация просто в браузере. Правда браузер для этого должен поддерживать CSS3 3d трансформации.

Подробный разбор моментов связанных с построением презентации и отображением отдельных слайдов был проведен в предыдущей публикации. Тогда за пределами нашего внимания остались возможности управления презентацией через API фреймворка. Для тех, кому мало получаемых «из коробки» возможностей impress.js, разберем его простой и компактный API.

Вспомним, что фреймворк impress.js предназначен для создания презентаций из слайдов, размещенных в трехмерном пространстве и обеспечивает умопомрачительные 3d трансформации при переходе от слайда к слайду.

Вот простой пример презентации.

Вся презентация помещается в контейнер у которого id="impress". Внутри общего контейнера, размещаются контейнеры отдельных слайдов, отмеченные классом: class="step". Местоположение слайда задаётся с помощью data-атрибутов координат: data-x, data-y, data-z и поворота (наклона): data-rotate-x, data-rotate-y, data-rotate-z. Кроме того для каждого слайда может быть задан масштаб data-атрибутом data-scale.

Созданная таким образом презентация прекрасно прокручиваются вперед нажатием специальных клавиш: таб, пробел, стрелка вправо, стрелка вниз, Page Down

и назад, нажатием клавиш стрелка влево, стрелка вверх, Page Up

Если же есть необходимость организовать автоматическое перелистывание слайдов через заданные промежутки времени, перехватывать события перехода к тому или иному слайду или иным способом расширить возможности работы с презентацией то здесь следует воспользоваться API фреймворка.

Полезные функции

Чтобы получить доступ к функциям API, необходимо создать объект, содержащий эти функции:

var api = impress();

теперь можно воспользоваться следующими функциями

api.init(): инициация презентации
api.next(): переход к следующему шагу (слайду) презентации
api.prev(): переход к предыдущему шагу (слайду) презентации
api.goto(id): переход к указанному шагу (слайду) презентации, можно перейти по id, по номеру шага (слайда), или по DOM-элементу слайда

Автоматическое перелистывание слайдов

Простое бесконечное перелистывание слайдов, через промежуток, например, 3 секунды:

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

Одноразовое перелистывание слайдов с установленным временем демонстрации

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);
});

Обработка событий

Программирование на JavaScript предполагает использование обработчиков событий, в качестве полезного средства управления ходом программы. Фреймворк impress.js позволяет обрабатывать два типа специальных событий:

stepenter – возникает в момент перехода на новый слайд (шаг)
stepleave– возникает в момент покидания очередного слайда (шага)

В простом примере выдается сообщение о покидаемом слайде и сообщение о слайде на который осуществляется переход.

document.addEventListener('impress:stepenter', function(event){
  alert( 'Переходим к слайду: ' + event.target.id );
}, false);
document.addEventListener('impress:stepleave', function(event){
  alert( 'Покидаем слайд: ' + event.target.id );
}, false);

Вот и весь нехитрый инструментарий, для программирования презентаций impress.js:

4 функции: init(), next(), prev(), goto(id);
2 события: stepenter, stepleave;

Но его вполне достаточно для построения слайдера или осуществления дополнительных действий при переходе от слайда к слайду.

Tags:

Hubs:

Website development