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

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

В опубликованной несколько дней назад статистике GitHub impress.js занимает 2-е место по количеству звездочек среди проектов, созданных одним автором. Совсем небольшой фреймворк, главный прикол которого заключается в том, что он служит не для создания слайдов, а для отображения переходов между слайдами и, очень часто, для отображения сразу нескольких слайдов в трехмерном пространстве.

3D трансформации между слайдами делают игру.



На habrahabr.ru уже была публикация посвященная impress.js, но это было почти 2 года назад, поэтому стоит поновому пройтись по ключевым моментам использования этого замечательного фреймворка.

Вот официальное демо. Как видите презентация, с впечатляющими переходами между слайдами и отображением сразу нескольких слайдов в трехмерном пространстве выполняется просто в браузере^*.

Я познакомился с этим фреймворком, когда понадобилось сделать презентацию быстрого старта работы с веб-сервисом TheOnlyPage. Поэтому в качестве примера работы с фреймворком impress.js будем использовать несколько первых слайдов этой длинной и скучной презентации.

Общие подходы

Для начала обсудим основы основ, чтобы понять логику применения impress.js.

Фреймворк работает с последовательностью слайдов, каждый слайд в терминологии фреймворка именуется шаг (step).

Что, и каким образом отображается внутри каждого слайда, определяется с помощью обычных средств HTML-разметки и CSS-стилей. Не предусмотрены предустановленные темы для дизайна презентаций.

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

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

Для каждого слайда (шага) могут быть установлены параметры, задающие его местоположение в трехмерном пространстве:

1. координаты (x, y, z) точки соответствующей центру слайда;


2. наклон (поворот) слайда вокруг осей X, Y, и Z.

Центр очередного слайда позиционируется в центре экрана.

Кроме положения в пространстве для каждого слайда (шага) может быть указан масштаб слайда.

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

Масштаб слайда не влияет на размеры очередного активного слайда, если это обычный слайд.

Масштаб слайда влияет:

1. на размеры очередного активного слайда, если это обзорный слайд;


2. на размеры обычных слайдов на общем обзорном слайде — слайды отображаются в соответствии с их масштабами;


3. на размеры обычных неактивных слайдов, попавших «в поле зрения» на обычном слайде


4. на переходные трансформации при переходе от одного обычного слайда к другому — демонстрируется изменение масштабов.

Установка

Чтобы задействовать impress.js достаточно в html-разметке

подключить соответствующий модуль:

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

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

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

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

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



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



Каждому слайду (шагу) назначаются 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"



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

Создание новой Закладки (1)

Активировать вкладку Закладки



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

Создание новой Закладки (2)

Нажать кнопку в левом верхнем углу экрана Новая Закладка



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

Создание новой Закладки (3)

Заполнить все поля формы



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

Создание новой Закладки (4)

Для предпросмотра нажать голубую кнопку Просмотр

Создание новой Закладки (5)

Для создания нажать синюю кнопку Создать

Создание новой Закладки (6)

Закладка создана!



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

http://ift.tt/1tAe7eSoverview

http://ift.tt/1tAe7eSnew_bookmark_1

http://ift.tt/1tAe7eSnew_bookmark_2

http://ift.tt/1tAe7eSnew_bookmark_3

http://ift.tt/1tAe7eSnew_bookmark_4

http://ift.tt/1tAe7eSnew_bookmark_5

http://ift.tt/1tAe7eSnew_bookmark_6

Используя подобные адреса можно переходить непосредственно к любому из слайдов.

Как видите, хэш адреса каждого слайда содержит уникальный id соответствующего слайда.

Если id слайда (шага) не задан, хэш адреса этого слайда будет иметь вид: #/step-N, где N – номер слайда (шага).

Классы динамически переназначаемые в процессе презентации

При отображении презентации, фреймворк назначает и отменяет специальные классы в элементе body и в элементах являющихся контейнерами для слайдов (шагов) презентации.

Сразу после загрузки, если браузер поддерживает функциональность фреймворка для элемента body устанавливается: class="impress-supported", если не поддерживает: class=" impress-not-supported". Что обычно используется для отображения сообщения о необходимости использовать подходящий браузер для просмотра презентации.

В нашем примере, присутствует следующий html-код:

Этот браузер не поддерживает функциональность необходмую для работы с impress.js.

Для лучшего восприятия презентации используйте последнию версию Chrome, Firefox или Safari.



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

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.

Scottish readers: Undecided about the referendum? Please read How the media shafted the people of Scotland and Scottish Independence, Power And Propaganda.