—»     —»   Создание великолепных визуализаций с помощью Impress.js
  Раздел: Анимация, Java-Скрипты, CSS/Style Sheets   Комментариев: 2  

Создание великолепных визуализаций с помощью Impress.js



Хотите создавать красивые слайд-шоу презентации для веб, используя только лишь HTML и CSS? С Impress.js это больше не проблема, так как это полноценная платформа трансформаций в CSS3, которая позволяет вам конвертировать HTML-контент в слайд-шоу с великолепными эффектами.

Impress.js – это jQuery-плагин, созданный на просторах github пользователем bartez, который использует CSS3-функционал для создания презентаций. Все современные браузеры будут поддерживать великолепные визуализации, созданные с помощью Impress.js.

Создание великолепных визуализаций с помощью Impress.js

Скачивание и установка Impress.js

Скачивайте Impress.js с ресурса github. Кликните по кнопке zip, как показано на скриншоте ниже и библиотека Impress.js скачается вместе с примерами.

Создание великолепных визуализаций с помощью Impress.js

Как только скачивание будет завершено, распакуйте zip-архив, в котором вы обнаружите примеры, использованные для демо Impress.js. Так как сегодня нам нужно научить вас использовать плагин Impress.js, нам нужно начать разработку кода с нуля. Для начала, создайте простой HTML-документ (код приведен ниже), и внедрите в него файл Impress.js.

Простой HTML-документ с включенным в него Impress.js

<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<script src="js/impress.js"></script>
</body>
</html>

Инициализация Impress.js

Для того чтобы использовать Impress.js, вам нужно использовать синтаксис, определенный библиотекой. Плагин проводит поиск элемента с ID impress для создания слайдов для вашей визуализации. Так что, мы создадим div с id «impress». Затем вы инициализируете библиотеку при помощи функции impress().init(), как показано в коде, приведенном ниже.

<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">

</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

Теперь мы готовы к тому, чтобы раскрыть вам все тонкости свойств Impress.js. Давайте перейдем к разработке слайдов.

Приступаем к созданию слайдов

Слайды, основанные на Impress.js, могут быть чем угодно и любого размера до тех пор, пока они будут подходить под критерий, определенный библиотекой. В следующем коде мы создали 2 простых слайда, которые помогут нам начать нашу презентацию.

<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>

<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

Разъясняем процесс создания слайдов

* Мы создали 2 div-элемента с ID start и slide2. Это будут 2 наших первых слайда. Важно использовать описательные значения ID в обозначениях слайдов.

* Если вы не вводите значения ID, то библиотека выставляет их автоматически в виде step-1, step-2 и т.д. Как только вы запустите презентацию, у вас будет возможность увидеть, как эти ID-значения меняются в URL по завершении перехода слайда.

* Значение атрибута класса – это лишь основное значение, которое должно быть выставлено для идентификации слайда. Каждый из ваших слайдов должен использовать постепенное значение класса.

* Если вы введете значение data-x, то это будет означать, что центр слайда будет расположен на значении data-x, которое мы привели. То же касается и значения data-y. Так что, data-x равное -100 и data-y равное 300 будет означать, что центр нашего слайда будет позиционирован следующим образом (-100px, 300px).

* В вышеприведенном примере второй слайд будет смещен на 1200px в правую сторону экрана при нажатии клавиши (пробел, табуляция или на стрелочки).

* Мы также использовали некоторые стили для каждого слайда. Это не обязательное условие, и вы можете выставить собственные стили по усмотрению. Данный пример предназначен под разрешение 1024х768px.

* Так что, открывайте HTML-файл при указанном разрешении, и жмите пробел, чтобы понаблюдать за визуализацией в действии.

Эффекты, поддерживаемые в библиотеке Impress.js

На данный момент в визуализациях вы можете использовать несколько эффектов. Если вы являетесь экспертом в области CSS, то вероятно сможете создать немереное количество эффектов при помощи лишь поддерживаемых функций.

* data-x - перемещает ваш слайд по оси х слева-направо, либо справа-налево, в зависимости от текущего положения.
Пример: если текущее значение х равняется 100, то data-х=’200’ сместит все справа-налево, а data-х=’-200’ сместит все слева-направо.

* data-y - перемещает ваш слайд по оси y сверху вниз, либо снизу вверх, в зависимости от текущего положения.
Пример: если текущее значение y равняется 100, то data-y=’200’ сместит все снизу вверх, а data-y=’-200’ сместит все сверху вниз.

* data-z - перемещает ваш слайд по оси z ближе по перспективе, либо дальше, в зависимости от текущего положения.
Пример: если текущее значение z равняется 100, то data-z=’200’ отдалит все элементы, а data-z=’-200’ приблизит.

* data-scale - масштабирует ваши слайды относительно других.
Пример: если текущее значение размера составляет 1, то data-scale=’4’ увеличит слайд в размерах в 4 раза, а data-scale=’-4’ уменьшит его в 4 раза.

* data-rotate-x - вращает слайд вокруг оси х по указанным градусам.
Пример: data-scale-x=’90’ повернет слайд на 90 градусов по часовой стрелке, а data-scale-x=’-90’ в обратную сторону.

* data-rotate-y - вращает слайд вокруг оси y по указанным градусам.
Пример: data-scale-y=’90’ повернет слайд на 90 градусов по часовой стрелке, а data-scale-y=’-90’ в обратную сторону.

* data-rotate-z - вращает слайд вокруг оси z по указанным градусам.
Пример: data-scale-z=’90’ повернет слайд на 90 градусов по часовой стрелке, а data-scale-z=’-90’ в обратную сторону. .data-rotate равен data-rotate-z.

Мы только что обучились всему, что необходимо для создания отличных визуализаций. Давайте закончим с разговорами, и приступим к визуализации при помощи свойств impress.js.

Создание полноценной визуализации при помощи поддерживаемых эффектов

Мы уже создали 2 слайда для нашей презентации. Давайте создадим больше слайдов с комбинациями эффектов из impress.js. Мы покажем вам код для каждого слайда и объясним, за что конкретно отвечает каждый отдел.

Создание великолепных визуализаций с помощью Impress.js

Слайд 3

Данный слайд имеет указанные значения data-x и data-y. То есть, он будет перемещаться ка по оси х, так и у, следовательно, здесь у нас будет диагональный переход.

<div id="slide3" data-x="2200" data-y="500">
<p>This Slide Moves From Right To Left and Bottom To Top</p>
</div>

Слайд 4

У данного слайда имеется установленное значение х, как и у предыдущего, а также значение у составляющее -500. Таким образом, значение data-y занижено относительно предыдущего слайда. Следовательно, он будет перемещаться сверху вниз. Если вам хочется перемещать его в обратном направлении, просто увеличьте значение data-y относительно предыдущего слайда.

<div id="slide4" data-x="2200" data-y="-500">
<p>This Slide Moves Top To Bottom</p>
</div>

Слайд 5

Данный слайд обозначен значением data-rotate равным 150, и увеличенным значением data-x. Следовательно, он будет вращаться на 150 градусов по часовой стрелке и перемещаться по оси х.

<div id="slide5" data-x="3200" data-rotate="150">
<p>This Slide Rotates Clockwise Around z-axis</p>
</div>

Слайд 6

Данный слайд имеет значение data-scale равное 3. Следовательно, данный слайд будет в три раза больше размером, нежели остальные.

<div id="slide6" data-x="6200" data-scale='3'>
<p>This Slide Scales 3 Times</p>
</div>

Слайд 7

Данный слайд имеет установленные значения x, y и z. Таким образом, он будет отдаляться от экрана, а также перемещаться по осям х и y.

<div id="slide7" data-x="4200" data-y='1500' data-z='1500'>
<p>Away</p>
</div>

Слайд 8

Данный слайд имеет сниженное значение data-z относительно предыдущего слайда. Следовательно, он будет приближаться к экрану.

<div id="slide8" data-x="4900" data-y='1500' data-z='100'>
<p>Towards</p>
</div>

Слайд 9

Данный слайд будет приближаться еще ближе, так как обозначен еще более низким значением data-z.

<div id="slide9" data-x="5600" data-y='1500' data-z='-1500'>
<p>Futher Towards</p>
</div>

Слайд 10

Наконец последнему слайду мы задаем data-scale=10. Следовательно, он будет в 10 раз больше остальных слайдов. У вас будет возможность видеть расположение всех 10 слайдов на данном этапе просмотра.

<div id="slide10" data-x="6600" data-y='3000' data-scale='10'>
<p>Visualization Slide Positions</p>
</div>

На этом мы закончили нашу презентацию, и далее мы приводим вам полный исходный код. В данном примере мы использовали определенные CSS-параметры для слайдов. Но вы можете использовать собственные стили, и по-своему настраивать визуализацию в Impress.js.

<html lang="en">
<head>
<style>
body{
width:1024px;
font-size:20px;
background: rgb(215, 215, 215);
background: -webkit-radial-gradient(#FFFFFF, #68BEFB);
background: -moz-radial-gradient(#FFFFFF, #68BEFB)
repeat scroll 0 0 transparent;
background: -ms-radial-gradient(#FFFFFF, #68BEFB);
background: -o-radial-gradient(#FFFFFF, #68BEFB);
background: radial-gradient(#FFFFFF, #68BEFB);
}

#start{
text-align:center;
width:1024px;
font-size:80px;
}
#slide1{
text-align:center;
width:1024px;
font-size:80px;
}
#slide2{
text-align:center;
width:1024px;
font-size:80px;
}

.step{
text-align:center;
width:1024px;
font-size:80px;
}

#slide7{
width:400px;
}
#slide8{
width:400px;
}
#slide9{
width:400px;
}

.hint_text{
font-size:30px;
background-color:#EEE;
padding:15px;
}

.fallback-message {
font-family: sans-serif;
line-height: 1.3;

width: 780px;
padding: 10px 10px 0;
margin: 20px auto;

border: 1px solid #E4C652;
border-radius: 10px;
background: #EEDC94;
}

.fallback-message p {
margin-bottom: 10px;
}

.impress-supported .fallback-message {
display: none;
}
</style>
</head>
<body>

<div id="impress">
<div id="start" >
<p>Creating Stunning Visualizations</p>
<p>Impress.js </p>
<p class='hint_text'>Press Spacebar or Tab To Get Started</p>
</div>

<div id="slide1" data-x="-1200">
<p>This Slide Moves From Left To Right</p>
</div>

<div id="slide2" data-x="1200">
<p>This Slide Moves From Right To Left</p>
</div>

<div id="slide3" data-x="2200" data-y="500">
<p>This Slide Moves From Right To Left and Bottom To Top</p>
</div>

<div id="slide4" data-x="2200" data-y="-500">
<p>This Slide Moves Top To Bottom</p>
</div>

<div id="slide5" data-x="3200" data-rotate="150">
<p>This Slide Rotates Clockwise Around z-axis</p>
</div>

<div id="slide6" data-x="6200" data-scale='3'>
<p>This Slide Scales 3 Times</p>
</div>

<div id="slide7" data-x="4200" data-y='1500' data-z='1500'>
<p>Away</p>
</div>

<div id="slide8" data-x="4900" data-y='1500' data-z='100'>
<p>Towards</p>
</div>

<div id="slide9" data-x="5600" data-y='1500' data-z='-1500'>
<p>Futher Towards</p>
</div>

<div id="slide10" data-x="6600" data-y='3000' data-scale='10'>
<p>Visualization Slide Positions</p>
</div>

</div>

<div>
<p>Your browser <b>doesn't support the features required</b> by impress.js,
so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>,
<b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript">impress().init();</script>

</body>
</html>

Проверка совместимости с браузерами

Кроме Opera, Impress.js поддерживается в свежих версиях практически любого браузера (Firefox, Chrome, Safari и Internet Explorer 10). Если браузер не поддерживается, мы можем использовать сообщение об откате, предусмотренное в библиотеке. Мы включили его в полную версию кода, представленного выше. Дополнительные стили должны быть определены, чтобы отображение производилось правильно. Весь необходимый код для сообщения от откате приведен ниже:

<style>
.fallback-message {
font-family: sans-serif;
line-height: 1.3;

width: 780px;
padding: 10px 10px 0;
margin: 20px auto;

border: 1px solid #E4C652;
border-radius: 10px;
background: #EEDC94;
}

.fallback-message p {
margin-bottom: 10px;
}

.impress-supported .fallback-message {
display: none;
}
</style>

<div>
<p>Your browser <b>doesn't support the features required</b> by impress.js,
so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>,
<b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

Что же дальше?

Данное руководство рассказывает об основных методах создания визуализации, которая используется для демонстрации эффектов Impress.js. Вы можете использовать CSS3-свойства вроде transition, shadows и gradients в качестве наполнителя слайдов для создания более креативных визуализаций. Также не забудьте изменить значения x и y и на подходящие вам в слайдах, дабы избежать перекрывания контента. Ниже мы привели для вас список отличных визуализаций, реализованных при помощи Impress.js.

* CSS 3D transforms при помощи meet.js от @bartaz
* Что такое адаптивный веб-дизайн от John Polacek
* Презентация 12412.org для Digibury от Stephen Fulljames
* Виртуализация дата-центра при помощи Wakame-VDC от Andreas Kieckens
* Асинхронный javascript от Mariusz Nowak

Смотреть демо | Скачать архивом
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 10408   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 июня 2012 @ 09:34
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Opera 11.61 - не фурычит.
Комментарий #2: 4 июля 2012 @ 08:18
Написал: Bunakoff — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Последняя версия Chrome на 04.07.2012 - работает.

Последняя версия IE на 04.07.2012 - не работает.

Автору спасибо. Взял за основу стартовой странички проекта. Интересный подход.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930