Презентація з допомогою 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-розмітки
підключити відповідний модуль:

<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="крок"


<div id="impress">
<div class="крок">
<!- тут вміст 1-го слайду -->
</div>
<div class="крок">
<!- тут вміст 2-го слайду -->
</div>
<div class="крок">
<!- тут вміст 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="крок" 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) адреси в адресному рядку браузера, в нашому прикладі адреси слайдів будуть наступні:

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

help.theonlypage.com/impress_demo.html#/new_bookmark_1

help.theonlypage.com/impress_demo.html#/new_bookmark_2

help.theonlypage.com/impress_demo.html#/new_bookmark_3

help.theonlypage.com/impress_demo.html#/new_bookmark_4

help.theonlypage.com/impress_demo.html#/new_bookmark_5

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

<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. Докладніше про підтримку браузерів тут.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.