Презентация с помощью 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"
Каждый следующий слайд (шаг) презентации помещается в последовательно расположенном контейнере, класс которого: 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) внешнего вида этого слайда.
Третий слайд обычный. Его можно видеть в центре верхней строки обзорного слайда, координаты data-x="-200" data-y="-300" . Масштаб явно не установлен, значит равен 1 . Слайд повернут на 90 o вокруг оси Z, так как data-rotate="90" . Класс slide2 используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.
Четвертый слайд обычный. Его можно видеть в правом верхней квадрате обзорного слайда, координаты data-x="700" data-y="-500" . Слайд повернут на 180 o вокруг оси Z, так как data-rotate="180" . Класс slide2 используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.
Пятый, шестой и седьмой слайды — обычные. Эти слайды расположены последовательно справа налево в нижней строке экрана. Угол поворота каждого следующего вокруг оси Z на 90 o больше предыдущего: data-rotate="270", data-rotate="0", data-rotate="90" , соответственно. Классы slide и slide1 используются для определения в таблицах стилей (CSS) внешнего вида этих слайдов.
При переходе от слайда к слайду меняется хэш (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 соответствующего слайда.
Если i d слайда (шага) не задан, хэш адреса этого слайда будет иметь вид: #/step-N, где N – номер слайда (шага).
Классы динамически переназначаемые в процессе презентации
При отображении презентации, фреймворк назначает и отменяет специальные классы в элементе body и в элементах являющихся контейнерами для слайдов (шагов) презентации.
Сразу после загрузки, если браузер поддерживает функциональность фреймворка для элемента body устанавливается: class="impress-supported" , если не поддерживает: class=" impress-not-supported" . Что обычно используется для отображения сообщения о необходимости использовать подходящий браузер для просмотра презентации.
В нашем примере, присутствует следующий html-код:
А в таблице стилей определено отображение сообщения только если браузер не поддерживает impress.js
В результате, если презентация открывается в неподходящем браузере, например, в браузере Opera отображается сообщение:
После инициации презентации, вызовом соответствующей функции:
для элемента 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