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

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

<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. Слайд повернут на 90o вокруг оси 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". Слайд повернут на 180o вокруг оси 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 на 90o больше предыдущего: 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 отображается сообщение:

image

После инициации презентации, вызовом соответствующей функции:

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. Подробнее про поддержку браузеров здесь.
TheOnlyPage
Компания
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 32

    +9
    Есть мнение, что для сайта-презентации слайдер (влево-вправо), все-таки, предпочтительнее. Потому что все эти перелеты / zoom-in / zoom-out / трансформации отвлекают от самого содержания.
      +1
      А бывают информативные презентации? )
        +9
        Бывают. Просто в России их делать не умеют.
          0
          Честно говоря, не только в России :(
            0
            Я видел вживую парочку презентаций, проведенных заокеанскими товарищами и мне понравилось. А вот то, что местные коллеги делали, всегда было снотворным.
        0
        Если нужен простой слайдер (влево-вправо) то на такое impress.js тоже сгодится. А затем, если появится желание, можно и трансформации в 3d пространстве добавить.
          0
          Что бывает нужно, так это показать 2-3 слайда одновременно, наложить графики друг на друга, совместить гистограммы в 3D и т.д. Ещё можно показывать где-нибудь сбоку маленькие пиктограммы слайдов, относящихся к текущему, не только чтобы перейти по ним можно было, но чтобы напомнить их содержание.
          0
          В результате, если презентация открывается в неподходящем браузере, например, в браузере Opera отображается сообщение

          Беда в том, что неподходящими оказались все мобильные браузеры, что у меня есть.
            0
            С поддержкой мобильных браузеров есть проблемы. В большинстве случаев остается только резервный вариант: простая прокрутка слайдов.
              0
              Кстати, хоть как-то оно работает как раз таки в опере. Только тормозит нещадно. В хроме, файрфоксе, дефолтовом андроидном браузере просто не работает.

              В общем, я испытываю смешанные чувства, т.к. неоднократно наблюдал нетормозящие презентации со всякими свистелками, перделками и прочими спецэффектами на своем телефоне.
            0
            del
              +3
              Сидел я как-то на подобной 3d презентации в большом зале. От перелетов и поворотов укачивает слегка, говорю абсолютно серьезно.
                0
                Я пару презентаций сделал на этом Импрессе — и завязал: слишком много лишних движений требуется, да и эффекты эти докладу ничуть не помогают.
                –3
                При переходе от слайда к слайду меняется хэш (hash) адреса в адресной строке браузера

                Вообще-то это называется anchor.
                  +1
                  да ну: www.w3.org/MarkUp/1995-archive/Elements/A.html

                  А то, что вы имели в виду, называется fragment: www.w3.org/TR/1998/REC-html40-19980424/intro/intro.html#fragment-uri
                    +2
                    да ну: This kind of URI ends with "#" followed by an anchor identifier (called the fragment identifier)
                    Обязательно надо до чего-нибудь докопаться и не важно до чего
                      0
                      Вы хотели цитатой показать, что эта часть URL называется «anchor»? Вам это не удалось.

                      Читаем внимательно:
                      «anchor identifier» = аттрибут «id» либо «name» у элемента «a» (a от anchor), на который идет ссылка. Обращаю внимание на то, что речь идет про «якорь» на странице, куда идет ссылка, а не про часть URI.
                        0
                        Читаем внимательнее. Я этой цитатой хотел показать, что не надо до людей докапываться по мелочам. Так как в данном случае это не фундаментальный просчет, а на самом деле мелочь. Можно даже оговоркой назвать в некотором смысле, если автор знал что такое фрагмент. Фрагмент служит для перехода на якорь, поэтому, когда человек называет это якорем, то все понимают о чем он говорит. Одно служит прослойкой для доступа к другому, поэтому это простительно, на мой скромный взгляд. Как пример, многие люди говорят, что их программа записала напрямую в базу, хотя на самом деле пишется все через драйвер.

                        www.w3.org/TR/html401/struct/links.html
                        Having defined the anchor, we may link to it from the same or another document. URIs that designate anchors contain a "#" character followed by the anchor name (the fragment identifier).
                          +3
                          Давайте тогда уж по порядку:

                          1. slonopotamus делает утверждение, в общем-то неверное. Говоря вашими словами, начинает докапываться по мелочам к тексту статьи.

                          2. esc его поправляет, скорее всего руководствуясь вполне разумным принципом, что исправлять на неправильное — плохо.

                          3. Вы начинаете опровергать защищать slonopotamus, утверждая, что к нему докапываются по мелочи, хотя изначально это он делает замечание автору статьи. Причем в поддержку приводите цитату, которая никак не подтверждает утверждение slonopotamus.

                          Вы не видите тут некоторого противоречия?

                          Идем дальше. Вы приводите пример:
                          многие люди говорят, что их программа записала напрямую в базу, хотя на самом деле пишется все через драйвер.

                          Приминительно к текущей ситуации он превращается в такое: «человек сказал, что его программа записала в базу через драйвер, другой его поправил, что программа пишет в базу напрямую, третий сказал, что программа все же пишет через драйвер, четвертый сказал, что ко второму придираются по мелочам».
                            +3
                            Вы правы.
                    +4
                    Так как эта часть адреса хранится в атрибуте window.location.hash то привык назвать её хэш
                    0
                    ИМХО фрейморк хорош для создания презентаций и увеличения вау эффекта, но вот проблема которую я не смог побороть это сконвертировать его либо в пдф, либо во что-то более привычное для того что зашарить с людьми кто знает только как открыть пдф или ппт файл.

                    На гитхабе есть несколько конвертеров, но мне не удалось их собрать или заставить работать
                      –2
                      Когда-то делал на impress.js настоящую Солнечную систему, с полётом от планеты к планете, с появляющимся описанием… :)

                      В итоге, когда потребовалось показать, запихнул её в архив вместе с Chromium-ом, написал инструкцию, как открывать…
                      Так и не разобрались.

                      А вообще есть разные способы собрать html в exe. Например, Appcelerator Titanium с WebKit-ом внутри.
                      Есть от Mozilla что-то, уже не помню, как называется. Правда, там сначала нужно написать оболочку (на том же языке, на котором написан интерфейс Firefox, тоже не помню названия) с ифреймом.

                      P. S. не по теме, 1234 комментариев :)
                        –2
                        node-webkit всем в помощь
                          –1
                          А зачем вообще нужны такие извращения? Есть пачка форматов для презентаций, которые с большим шансом откроются на любом компьютере. Только если не стояла цель использовать именно impress.js.
                            –1
                            В общем-то обсуждаем именно impress.js, да.
                            Ну и мало какой формат может создать похожий вау-эффект. С 2d и 3d-переходами, всё на одной странице…
                              0
                              Да не, здесь не спорю, согласен =)
                              Я больше к этому придрался:
                              В итоге, когда потребовалось показать, запихнул её в архив вместе с Chromium-ом, написал инструкцию, как открывать…
                              Так и не разобрались.

                              Что слишком много возни, если нужно просто передать презентацию.
                              Но так речь не просто про презентацию, то конечно я рассуждаю параллельно о двух ситуациях, в одной из которых возня идет с просто презентацией, а в второй ситуации я просто не прав.
                          –1
                          можно, наверно, в mht завернуть. Тогда IE откроет. Firefox с плагином тоже. Остальные не знаю.

                          Я так свои презентации на Slidy упаковывал в один файл.
                          +3
                          Что-то меня укачивает от таких переходов, хотя в prezi я такого не наблюдал. Вероятно авторы своих презентаций перестарались с кружением, но как-то сложно воспринимать информацию, да ещё и укачивает.

                          Хочу ещё добавить, что есть reveal.js. Может и не так кружит голову, но тоже удобная в использовании, выглядит красиво и можно в PDF сохранить. Я обычно делаю презентации с кодом из iPython notebook, а там интеграция с reveal.js есть, так что получается совсем удобно, буквально в 1 команду получаешь красивую презентацию из кода.
                            0
                            А сервис-то (TheOnlyPage) спамом балуется… Добавьте хотя бы ссылку для отписки.
                              –2
                              Да блядь, сколько можно. Снова спам. В настройках новости отключены, других настроек не нашел. Суки.
                              0
                              Если кому интересно визуальный билдер для Impress JS презентации есть в проекте Azexo Composer WYSIWYG

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое