18 января 2012 в 15:51

impress.js — презентации на CSS3, рвущие шаблон tutorial

CSS*
Даже хорошие презентации, не содержащие списков из двадцати пунктов восьмым кеглем и вызывающих рвотный рефлекс картинок из бесплатных сборников клипарта “встречи и партнёрство” или “офисная жизнь”, следуют давным-давно заданному стандарту, без изменений перенесённому в офисные пакеты из мира старинных диапроекторов. Презентация всегда представляет собой набор прямоугольных картинок одинакового формата и размера. Иногда между ними добавляют переходы и анимацию, раздражающую не меньше разноцветных надписей и бессмысленно улыбающихся абстрактных офисных работников. Стандартом де-факто для хорошей презентации давно стала последовательность статичных слайдов без всякого мельтешения, с очень коротким текстом крупным шрифтом и несколькими тщательно подобранными фотографиями или скриншотами.

Основанный на трансформациях и переходах CSS3, javascript-фреймворк для создания презентаций impress.js выходит за рамки понятия “слайд” и позволяет строить презентации в открытом, неограниченном трёхмерном пространстве. Источником вдохновения для него послужил сервис prezi.com. Репозиторий impress.js на Гитхабе появился меньше месяца назад, но уже стал одним из самых популярных. Нетерпеливые могут посмотреть небольшую демку здесь, а остальные — создать пример необычной презентации прямо сейчас.

Impress.js пока поддерживает только последние десктопные версии Chrome и Safari, с остальными браузерами — как повезёт. Cоздадим новую страничку и подключим к ней скрипт impress.js, немного подравняем и подкрасим стилями и добавим div-обёртку с атрибутом id=”impress", внутри которой будет наша презентация:
<!doctype html>
<html>
<head>
   <title>Impress.js</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <style type="text/css">
        body  {
        background-color: #ed7;
        color: #400;
        font-size: 2em;
        }
        .step  {
        width: 1000px;
        }
        img  {
        margin-left: 450px;
        }
        .no-support-message  {
        display: none;
        }
        .impress-not-supported .no-support-message  {
        display: block;
        color: red;
        font-size: 2em;
        }
    </style>
</head>
<body>
<div id="impress">
    <div class="no-support-message">
        Увы! Impress.js пока поддерживает только Chrome и Safari.
    </div>
</div>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

Каждый слайд, вернее, шаг анимации представлен блоком вида <div class=”step” … >, к которому можно добавлять атрибуты, задающие положение и масштаб. Переходить между слайдами можно с помощью пробела или стрелок. Фреймворку пока меньше месяца, так что набор доступных атрибутов ещё очень ограничен:
  • data-x
  • data-y
  • data-z
  • data-rotate-x
  • data-rotate-y
  • data-rotate-z (или просто data-rotate)
  • data-scale

Итак, первый шаг. Все атрибуты по-умолчанию равны нулю:
<div class="step">
    <h1>Первый шаг - без атрибутов:</h1>
    &ltdiv class="step"&gt
</div>

Второй шаг. Двигаемся на 1000 пикселей вправо и вниз:
<div class="step" data-x="1000" data-y="1000">
    <h1>Второй шаг - трансляция:</h1>
    &ltdiv class="step" data-x="1000" data-y="1000"&gt
</div>

Третий шаг. Начинаем менять масштаб:
<div class="step" data-x="3000" data-y="-1000" data-scale="4">
    <h1>Третий шаг - масштаб:</h1>
    &ltdiv class="step" data-x="3000" data-y="-1000" data-scale="4"&gt
</div>

Четвёртый шаг. Делаем полубочку:
<div class="step" data-x="-6100" data-y="-3800" data-rotate="180" data-scale="40">
    <h1>Четвёртый шаг - поворот:</h1>
    &ltdiv class="step" data-x="-1700" data-y="-3000" data-rotate="180" data-scale="40"&gt
</div>

Пятый шаг. Трёхмерные CSS-преобразования:
<div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29">
    <h1>Пятый шаг - 3D:</h1>
    &ltdiv class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"&gt
</div>

Шестой шаг. Главное — в деталях:
<div class="step" data-x="7963.7" data-y="-8106.3" data-scale="0.04">
    <img src="img/small_nuance.png">
</div>

Вот и всё. Учитывая ажиотаж, который impress.js вызвал на Гитхабе, вполне можно надеяться на его быстрое развитие. Кроме очевидного применения для создания презентаций, концепция размещения контента в неограниченном трёхмерном пространстве вместо плоской страницы фиксированного размера вполне может найти применение в планшетах с multitouch, так как они естественным и удобным образом поддерживают зуммирование и скроллинг во всех направлениях. Напоминает масштабируемый интерфейс, о котором мечтал Джеф Раскин.

UPD: В комментариях хабраюзер smashercosmo подсказал, что уже есть порт на jQuery с упором на кросс-браузерность и использование в веб-дизайне вообще, а не только для перзентаций.
Илья Сименко @ilya42
карма
528,7
рейтинг 0,0
full stack javascript developer
Самое читаемое Разработка

Комментарии (46)

  • +6
    В хроме всё страшно моргает и мерцает)
    • +6
      Странно. У меня даже без 3D-ускорения вполне пристойно выглядит.
      • 0
        +1
        Правда, под конец немного притормаживало
      • 0
        Наверное из-за того что у меня он в линуксе с ати.
        • 0
          у меня в линуксе с ати ничего не моргает.
          • 0
            наверное у него старый ATI без дров.
            • 0
              hd3470, fglrx, 64 битка — моргает.
              Причём странное, если закрыть и заново открыть хром — нормально, если в нём немного поработать и открыть — мерцает.
          • 0
            аналогично. версия 16.0.912.75 на убунте.
            все отлично. не тормозит и не моргает.
    • 0
      в хроме очень страшно тормозит.
    • +8
      Chrome, Mac — тормозов и миганий нет.
      • +1
        Сафари Мак — тоже все галдко без тормозов
        PS: очень впечатлило :)
  • +1
    Может у меня фантазия сегодня протестует так же как и wiki, но чем это отличается от, униженных в начале записи, анимированных слайдов, я не понял.
    • +1
      Ну, всякие вращения и 3D, пожалуй, и правда больше для вау-эффекта, но вот pan&zoom без ограничений — реально полезная и удобная штука. Как для презентаций, так и для интерфейса вообще (особенно, если есть multitouch). В СимСити и всяких стратегиях такой интерфейс имеет глубокую и успешную историю. А для веба пока в новинку.
  • +1
    Спасибо.
    Очень красиво и порадовали комментарии в сорсе.
  • 0
    А в Firefox пока не работает :(
    • +1
      В Авроре ( FF11.0a2 ) уже работает и весьма шустро ;)
      • 0
        в Nigtly (12.0а1) тоже работает. Правда, не шустро, но работает.
  • +2
    Осталось приделать графический редактор этой штуки — и PowerPoint можно зарывать)
    • 0
      Для PowerPoint есть чудный плагин, который позволяет сделать аналогичные эффекты, кроме 3D. Называется pptPlex
    • –1
      prezi.com?
  • 0
    Насколько я понимаю, этот фреймворк призван заменить неработающее свойство transform в transition'e, ибо все остальное можно сделать на чистом css.
  • +7
    Уже есть порт на jquery. jmpress
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Какой нужен Хром под Линух, чтобы нормально работало, не подскажите?
    В демке только слово «press» размытое на весь экран с попытками автомасштабирования.

    • 0
      У меня нормально работают последние Хром и Хромиум
    • 0
      в 18.0.997.0 (Developer Build 116462 Linux) всё прекрасно работает
      • 0
        Разобрался. Это на моей стороне плагин Better Pop Up Blocker блокировал скроллинг и все разъезжалось.
  • 0
    Очень здорово
    • 0
      Черт. Отправил недописав.

      Оченб здорово, спасибо за показ этой штуки.
  • –1
    лох конечно цепенеет, но Стив наверное не стал бы делать презентацию iPhone 5 в этом — следующие слайды палятся
    • 0
      Ну, в этом что-то есть, не правда ли? Подразнить можно зрителя, приподоткрыть завесу тайны на пол-секунды ;) Если использовать творчески и с любовью — это не баг, а очень даже фича.
  • +1
    было подобное, но без тормозов: bartaz.github.com/meetjs/css3d/
    Найдено тут
    • +1
      Это, кстати, демка того же автора: )
      • +1
        Хорошо, что он не забросил этот проект. Первая демка то ли оптимизирована лучше, то ли хз, но впечатление от общей плавности оставляет лучше.
  • –4
    прези.ком
    • +1
      Доброе утро!
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Если зажать любую управляющую кнопку, то можно наблюдать занятный эффект.
    Кстати backspace тоже работает в дополнение к анонсированным стрелкам и пробелу.
    • +3
      Особо внимательные могли бы заметить, что при переходе по слайдам меняется хеш урла в адресной строке. Кнопка backspace в браузере, в большинстве случаев работает как кнопка «Назад» и меняет урл на предыдущий. Изменив урл вы меняете слайд. Так что можно и ручками урл вписать и нажать enter, и все сработает ;).
  • +2
    Действительно красиво!
    На встроенном браузере Nokia N9, кстати, прекрасно работает.
  • 0
    Как насчёт внедрения в страницу в качестве элемента для статьи? div + hidden overflow + relative position?
  • 0
    Будет работать на iPad'e если, то с удовольствием напишу интерфейс для программирования таких презентаций. Вообще генератор таких презентаций можно замутить достаточно быстро…
  • 0
    Приятная вещь, но пока не появится нормальный GUI для создания презентаций, возможность его использования очень ограничена.
  • 0
    Вот какая презентация получилась у меня: plugindetector.com/demo/impress-js/
  • 0
    Опять рискую набрать дикое количество минусов, но все скажу: имхо, стоит делать не еще однии prezi.com, а доработать prezi.com до нормального инструмента создания одностраничных сайтов. Для этого надо не так много: просто перестать думать о том, как использовать все возможности css 3 и не пытаться сделать power point

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