Презентация в браузере за 10 минут - миф или реальность
Как все начиналось?
Слайд 1
Слайд 2
OP
-OP
-OP!
Скучновато, да?
+
impress
.
js
Статистика Github
2 строчка среди проектов по количеству звездочек с одним автором
Основы основ
Фреймворк работает с последовательностью слайдов, каждый слайд в терминологии фреймворка - шаг (step)
Каждый слайд определяется с помощью обычных средств HTML и CSS
Все слайды размещаются в неком трехмерном пространстве
Возможны специальные обзорные слайды . В зависимости от своего положения , ориентации в пространстве и масштаба , отображают все доступные для обзора обычные слайды
Для каждого слайда:
1) координаты (x, y, z) точки соответствующей центру слайда
2) наклон (поворот) слайда вокруг осей X, Y, и Z
3) масштаб
С основами все
С чего начать?
У
с
т
а
н
о
в
к
а
https://github.com/bartaz/impress.js
Чего есть внутри?
Размещение слайдов:
<div id="impress">
<!-здесь все слайды презентации->
</div>
Инициализация:
<script src="impress.js"></script>
<script>
impress().init();
</script>
Первый шаг - без атрибутов
<div id="1" class="step slide">
<h1>Первый шаг - без атрибутов</h1>
</div>
<div id="2" class="step slide" data-x="1000" data-y="1000">
<h1>Второй шаг - трансляция</h1>
</div>
Второй шаг - трансляция
<div id="3" class="step slide" data-x="3000" data-y="-1000" data-scale="4">
<h1>Третий шаг - масштаб</h1>
</div>
Третий шаг - масштаб
<div id="4" class="step slide" data-x="-1700" data-y="-3000" data-rotate="180" data-scale="40">
<h1>Четвертый шаг - поворот</h1>
</div>
Четвертый шаг - поворот
<div id="5" class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29">
<h1>Пятый шаг</h1>
</div>
Пятый шаг
<div id="6" class="step" data-x="0" data-y="0" data-scale="40">
<h1>Шестой шаг - общий вид</h1>
</div>
Шестой шаг - общий вид
Авторские работы
Graphic web editor for Impress.js
http://www.dyapos.net/
http://strut.io/
impress.js S9
Template Pack
Ruby gem
Пишем слайды используя Markdown или Textile
http://slideshow-s9.github.io/slideshow-impress.js/
Плагины
impress-audio.js
Куда же без музыки в презентации :)
https://github.com/danielsimons1/impress-audio
impress.js-progress
Progress-bar для Вашей презентации
https://github.com/m42e/impress.js-progress
Минусы:
Отсутствуют предустановленные темы для дизайна презентаций
Проблемы в отображении на touch-устройствах
Нет событий для каждого отдельного слайда
Много нужно писть ручками
IE как всегда на высоте
Не самая лучшая документация
Плюсы:
Плагины упрощают жизнь
Есть возможно расширения библиотеки
Кроссбраузерность:
Chrome/Chromium, Safari, Firefox, IE 11
Any questions?
impress
.
js
Андрей Козяков
/kosiakoff
/kosiak_man