exeditor 18 янв 2012 в 15:51

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

4 мин

18K

Туториал

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

Основанный на трансформациях и переходах 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>
    &ampltdiv class="step"&ampgt
</div>

Второй шаг. Двигаемся на 1000 пикселей вправо и вниз:

<div class="step" data-x="1000" data-y="1000">
    <h1>Второй шаг - трансляция:</h1>
    &ampltdiv class="step" data-x="1000" data-y="1000"&ampgt
</div>

Третий шаг. Начинаем менять масштаб:

<div class="step" data-x="3000" data-y="-1000" data-scale="4">
    <h1>Третий шаг - масштаб:</h1>
    &ampltdiv class="step" data-x="3000" data-y="-1000" data-scale="4"&ampgt
</div>

Четвёртый шаг. Делаем полубочку:

<div class="step" data-x="-6100" data-y="-3800" data-rotate="180" data-scale="40">
    <h1>Четвёртый шаг - поворот:</h1>
    &ampltdiv class="step" data-x="-1700" data-y="-3000" data-rotate="180" data-scale="40"&ampgt
</div>

Пятый шаг. Трёхмерные CSS-преобразования:

<div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29">
    <h1>Пятый шаг - 3D:</h1>
    &ampltdiv class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"&ampgt
</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 с упором на кросс-браузерность и использование в веб-дизайне вообще, а не только для перзентаций.

Теги:

Хабы:

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

Публикации

Истории

Ближайшие события