ValentynSolovyov Sep 19 2014 at 21:36

Презентация с помощью impress.js – просто и элегантно

8 min

27K

TheOnlyPage corporate blogWorking with 3D-graphics*

Tutorial

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-разметке
подключить соответствующий модуль:

<script src="//cdnjs.cloudflare.com/ajax/libs/impress.js/0.5.3/impress.min.js"></script>

Вот и всё. Никакие вспомогательные таблицы стилей (CSS) в состав фреймворка не входят, только один javscript-модуль.

Далее необходимо проинициировать фреймворк, например, так:

<script>impress().init();</script>

Важный момент – загрузка javascript-кода фреймворка должна происходить после загрузки всего html-кода презентации, то есть строка подключения библиотеки должна располагаться внизу html разметки.

Размещение в бесконечном трехмерном пространстве

Вся презентация должна находиться в контейнере, у которого id="impress"

<div id="impress">
  <!— здесь все слайды презентации -->
</div>

Каждый следующий слайд (шаг) презентации помещается в последовательно расположенном контейнере, класс которого: class="step"

<div id="impress">
  <div class="step">
    <!— здесь содержимое 1-го слайда -->
  </div>
  <div class="step">
    <!— здесь содержимое 2-го слайда -->
  </div>
  <div class="step">
    <!— здесь содержимое 3-го слайда -->
  </div>
    <!—  и так далее остальные слайды  -->
</div>

Каждому слайду (шагу) назначаются data-атрибуты, которые определяют его место в пространстве: data-x, data-y, data-z и поворот (вокруг соответствующей оси: X, Y, Z): data-rotate-x, data-rotate-y, data-rotate-z.

Поворот вокруг оси z вместо data-rotate-z может сокращенно определяться атрибутом data-rotate.

Масштаб отображения текущего слайда (по умолчанию 1) задается data-атрибутом data-scale.

Пример презентации

А теперь, чтобы увидеть результаты применения data-атрибутов рассмотрим простенький пример, состоящий из нескольких первых слайдов презентации веб-сервиса TheOnlyPage

Чтобы не усложнять, все слайды расположены в одной плоскости.

Первый слайд обзорный – то есть внутри контейнера нет никаких элементов. Чтобы на экране при отображении этого слайда, поместились все 6 слайдов презентации масштаб установлен data-scale="2"

<div id="overview" class="step" data-scale="2">
</div>

Второй слайд обычный. Его можно видеть в левом верхнем квадрате обзорного слайда, координаты data-x="-700" data-y="-400". Масштаб установлен data-scale="0.25" чтобы продемонстрировать, что в результате слайд выглядит уменьшенным в общем обзорном слайде, на размеры обычного слайда в активном состоянии масштабирование не влияет, но анимационный эффект масштабирования отрабатывается от второго слайда к третьему, у которого масштаб по умолчанию, равный 1. Класс slide используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.

<div id="new_bookmark_1" class="slide step" data-x="-700" data-y="-400" data-scale="0.25">
  <h2>Создание новой Закладки (1)</h2>
  <p>Активировать вкладку <strong>Закладки</strong></p>
  <div><img src="" alt="" /></div> 
</div>

Третий слайд обычный. Его можно видеть в центре верхней строки обзорного слайда, координаты data-x="-200" data-y="-300". Масштаб явно не установлен, значит равен 1. Слайд повернут на 90^o вокруг оси Z, так как data-rotate="90". Класс slide2 используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.

<div id="new_bookmark_2" class="slide2 step" data-x="-200" data-y="-300" data-rotate="90">
  <h2>Создание новой Закладки (2)</h2>
  <p>Нажать кнопку в левом верхнем углу экрана <strong>Новая Закладка</strong></p>
  <div><img src="" alt="" /></div>
</div>

Четвертый слайд обычный. Его можно видеть в правом верхней квадрате обзорного слайда, координаты data-x="700" data-y="-500". Слайд повернут на 180^o вокруг оси Z, так как data-rotate="180". Класс slide2 используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.

<div id="new_bookmark_3" class="slide2 step" data-x="700" data-y="-500" data-rotate="180">
  <h2>Создание новой Закладки (3)</h2>
  <p>Заполнить все поля формы</p>
  <div><img src="" alt="" /></div>
</div>

Пятый, шестой и седьмой слайды — обычные. Эти слайды расположены последовательно справа налево в нижней строке экрана. Угол поворота каждого следующего вокруг оси Z на 90^o больше предыдущего: data-rotate="270", data-rotate="0", data-rotate="90", соответственно. Классы slide и slide1 используются для определения в таблицах стилей (CSS) внешнего вида этих слайдов.

<div id="new_bookmark_4" class="slide step" data-x="700" data-y="300" data-rotate="270">
  <h2>Создание новой Закладки (4)</h2>
  <p>Для предпросмотра нажать голубую кнопку <strong>Просмотр</strong></p>
  <div><img src="" alt="" /></div>
</div>   
  <div id="new_bookmark_5" class="slide step" data-x="0" data-y="400" data-rotate="0">
  <h2>Создание новой Закладки (5)</h2>
  <p>Для создания нажать синюю кнопку <strong>Создать</strong></p>
  <div><img src="" alt="" /></div>
</div>
<div id="new_bookmark_6" class="slide1 step" data-x="-900" data-y="250" data-rotate="90">
  <h2>Создание новой Закладки (6)</h2>
  <p>Закладка создана!</p>
  <div><img src="" alt="" /></div>
</div>

При переходе от слайда к слайду меняется хэш (hash) адреса в адресной строке браузера, в нашем примере адреса слайдов будут следующие:

http://help.theonlypage.com/impress_demo.html#/overview

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-код:

<div class="fallback-message">
  <p>Этот браузер не поддерживает функциональность необходмую для работы с <b>impress.js</b>.</p>
  <p>Для лучшего восприятия презентации используйте последнию версию <b>Chrome</b>, <b>Firefox</b> или <b>Safari</b>.
</div>

А в таблице стилей определено отображение сообщения только если браузер не поддерживает 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. Подробнее про поддержку браузеров здесь.

Tags:

Hubs: