Презентация с помощью impress.js – просто и элегантно
impress.js — популярный фреймворк предназначенный для создания неординарных, искрящихся профессиональным блеском презентаций, которые демонстрируются просто в браузере*.В опубликованной несколько дней назад статистике GitHub impress.js занимает 2-е место по количеству звездочек среди проектов, созданных одним автором. Совсем небольшой фреймворк, главный прикол которого заключается в том, что он служит не для создания слайдов, а для отображения переходов между слайдами и, очень часто, для отображения сразу нескольких слайдов в трехмерном пространстве.
3D трансформации между слайдами делают игру.На habrahabr.ru уже была публикация посвященная impress.js, но это было почти 2 года назад, поэтому стоит поновому пройтись по ключевым моментам использования этого замечательного фреймворка.
Вот официальное демо. Как видите презентация, с впечатляющими переходами между слайдами и отображением сразу нескольких слайдов в трехмерном пространстве выполняется просто в браузере*.
Я познакомился с этим фреймворком, когда понадобилось сделать презентацию быстрого старта работы с веб-сервисом TheOnlyPage. Поэтому в качестве примера работы с фреймворком impress.js будем использовать несколько первых слайдов этой длинной и скучной презентации.
Общие подходыДля начала обсудим основы основ, чтобы понять логику применения impress.js.Фреймворк работает с последовательностью слайдов, каждый слайд в терминологии фреймворка именуется шаг (step).
Что, и каким образом отображается внутри каждого слайда, определяется с помощью обычных средств HTML-разметки и CSS-стилей. Не предусмотрены предустановленные темы для дизайна презентаций.
Все слайды размещаются в неком трехмерном пространстве.
Возможны специальные обзорные слайды, которые сами по себе пустые, не содержат никаких html-элементов, но, в зависимости от своего положения, ориентации в пространстве и масштаба, отображают все доступные для обзора обычные слайды.
Для каждого слайда (шага) могут быть установлены параметры, задающие его местоположение в трехмерном пространстве:
координаты (x, y, z) точки соответствующей центру слайда; наклон (поворот) слайда вокруг осей X, Y, и Z. Центр очередного слайда позиционируется в центре экрана.Кроме положения в пространстве для каждого слайда (шага) может быть указан масштаб слайда.
Пре переходе от одного слайда к другому автоматически реализуются анимационные эффекты: перемещения, поворота и масштабирования (изменения размеров).
Масштаб слайда не влияет на размеры очередного активного слайда, если это обычный слайд.
Масштаб слайда влияет:
на размеры очередного активного слайда, если это обзорный слайд; на размеры обычных слайдов на общем обзорном слайде — слайды отображаются в соответствии с их масштабами; на размеры обычных неактивных слайдов, попавших «в поле зрения» на обычном слайде на переходные трансформации при переходе от одного обычного слайда к другому — демонстрируется изменение масштабов. Установка Чтобы задействовать impress.js достаточно в html-разметкеподключить соответствующий модуль: Вот и всё. Никакие вспомогательные таблицы стилей (CSS) в состав фреймворка не входят, только один javscript-модуль.Далее необходимо проинициировать фреймворк, например, так:
Важный момент — загрузка javascript-кода фреймворка должна происходить после загрузки всего html-кода презентации, то есть строка подключения библиотеки должна располагаться внизу html разметки.Размещение в бесконечном трехмерном пространстве Вся презентация должна находиться в контейнере, у которого id=«impress»
Масштаб отображения текущего слайда (по умолчанию 1) задается data-атрибутом data-scale.
Пример презентации А теперь, чтобы увидеть результаты применения data-атрибутов рассмотрим простенький пример, состоящий из нескольких первых слайдов презентации веб-сервиса TheOnlyPageЧтобы не усложнять, все слайды расположены в одной плоскости.
Первый слайд обзорный — то есть внутри контейнера нет никаких элементов. Чтобы на экране при отображении этого слайда, поместились все 6 слайдов презентации масштаб установлен data-scale=»2»
http://help.theonlypage.com/impress_demo.html#/new_bookmark_1
http://help.theonlypage.com/impress_demo.html#/new_bookmark_2
http://help.theonlypage.com/impress_demo.html#/new_bookmark_3
http://help.theonlypage.com/impress_demo.html#/new_bookmark_4
http://help.theonlypage.com/impress_demo.html#/new_bookmark_5
http://help.theonlypage.com/impress_demo.html#/new_bookmark_6
Используя подобные адреса можно переходить непосредственно к любому из слайдов.
Как видите, хэш адреса каждого слайда содержит уникальный id соответствующего слайда.
Если id слайда (шага) не задан, хэш адреса этого слайда будет иметь вид: #/step-N, где N — номер слайда (шага).
Классы динамически переназначаемые в процессе презентации При отображении презентации, фреймворк назначает и отменяет специальные классы в элементе body и в элементах являющихся контейнерами для слайдов (шагов) презентации.Сразу после загрузки, если браузер поддерживает функциональность фреймворка для элемента body устанавливается: class=«impress-supported», если не поддерживает: class=» impress-not-supported». Что обычно используется для отображения сообщения о необходимости использовать подходящий браузер для просмотра презентации.
В нашем примере, присутствует следующий html-код:
А в таблице стилей определено отображение сообщения только если браузер не поддерживает impress.js .impress-not-supported .fallback-message { display: block; } .impress-supported .fallback-message { display: none; } В результате, если презентация открывается в неподходящем браузере, например, в браузере Opera отображается сообщение:

После инициации презентации, вызовом соответствующей функции:
impress ().init (); для элемента body устанавливается: class=«impress-enabled».Также для элемента body устанавливается класс, указывающий на первый слайд (шаг), в нашем примере это будет class=«impress-on-overview», а в общем случае имя этого класса задается конструкцией: «impress-on-» + id активного слайда (шага).
Для первого слайда устанавливаются классы: class=«present active».
Для остальных слайдов (шагов) устанавливаются класс: class=«future»
При дальнейшем просмотре слайдов в элементе body класс, определяемый уникальным id активного слайда имеет вид: «impress-on-» + id активного слайда (шага).
Для просмотренных слайдов устанавливается класс class=«past»
Для активного слайда: class=«present active»
Оставшиеся непросмотренные слайды, все также содержат класс: class=«future»
Такое динамическое изменение классов помогает при помощи CSS стилей подсвечивать, выделять или наоборот заглушать отображение активных, уже отображенных или еще не отображенных слайдов.
Используемые клавиши impress.js позволяет перемещаться циклически по слайдам презентации то есть с последнего слайда презентации идет переход не первый слайд.Переход к следующему слайду задается нажатием одной из клавиш:
таб, пробел, стрелка вправо, стрелка вниз, Page Down
переход к предыдущему слайду задается нажатием одной из клавиш:
стрелка влево, стрелка вверх, Page Up
Применяя API impress.js, можно существенно расширить возможности управления презентацией. Но javascript-программирование с использованием фреймворка это уже тема следующей, отдельной публикации.
*impress.js прекрасно работает в последних версиях браузеров Chrome, Firefox, Safari и IE. Подробнее про поддержку браузеров здесь.