Как создавать визуализации и презентации с помощью Impress.js
Impress - это jQuery-плагин, который использует CSS3 для создания красивых презентаций.
Посмотреть демо | Скачать файлы проекта
Загрузка и настройка
Загрузите плагин Impress с GitHub.
После завершения загрузки распакуйте zip-архив в папку. В ней находятся примеры использования Impress.
Мы будем разрабатывать собственную визуализацию с нуля. Сначала создайте основной HTML-документ и подключите в нем файл strike.js.
Базовый HTML-документ с подключенной библиотекой Impress
<html lang = "en" >
<head>
<title> Impress Demo </ title>
</ head>
<body>
<script src = "js / impression.js" > </ script
</ body>
</ html >
Инициализация библиотеки
Для работы с Impress.js необходимо использовать синтаксис, определенный библиотекой. Плагин ищет элемент с идентификатором impress, чтобы создать слайды визуализации. Поэтому мы создадим блок div с идентификатором «impress». Затем инициализируем библиотеку, используя функцию strike ().Init ().
<html lang = "en" >
<head>
<title> Impress Demo </ title>
</ head>
<body>
<div id = "impress" >
</ div>
<script type = "text / javascript" > impression (). init (); </ script> <script type = "text / javascript" src = "js / impression.js" > </ script>
</ body>
</ html> Создание слайдов
С помощью приведенного ниже кода я создал два простых слайда.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
Creating Stunning Visualizations
Impress.js
</div>
<div id="slide2" data-x="-1200" data-y="0">
First Slide Moves From Left To Right
Impress.js
</div>
</div>
<script>impress().init();</script>
<script src="js/impress.js"></script>
</body>
</html>Пояснение создания слайдов
- Я создал два элемента div с идентификаторами start и slide2. Это будут первые два слайда.
- Если id не заданы, библиотека автоматически присвоит им значения идентификаторов step-1, step-2 и т. д. При запуске презентации видно, как эти значения изменяются в URL-адресах, когда выполняется переход между слайдами.
- Каждый слайд должен включать в себя значение класса step.
- Для первого слайда не нужно определять значения data-x и data-y. Он будет отображаться в окне браузера с размерами по умолчанию.
- Если мы указываем data-x, то центр слайда будет располагаться по заданным координатам. То же самое касается значения data-y. Например, data-x=100 и data-y= 300, означают, что центр слайда будет расположен в точке (-100px, 300px).
- В приведенном выше примере второй слайд переместится на 1200 пикселей вправо при нажатии клавиши пробела, табуляции, стрелки.
- Откройте HTML-файл и нажмите клавишу «Пробел», чтобы увидеть визуализацию в действии.
Эффекты, поддерживаемые библиотекой Impress
В библиотеке доступно несколько эффектов, которые можно использовать при создании визуализаций. Но их список можно расширить с помощью следующих функций:
- data-x- перемещает слайд в направлении оси x слева направо или справа налево в зависимости от текущей позиции. Пример: если текущее значение x равно 100, data-x = '200′ перемещает слайд справа налево, а data-x ='- 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′ увеличивает слайд в четыре раза, по отношению к другим слайдам. А data-scale ='- 4′ уменьшает слайд в четыре раза.
- data-rotate-x- поворачивает слайд вокруг оси x на заданное количество градусов. Пример: data-scale-x = '90' повернет слайд на 90 градусов по часовой стрелке, а data-scale-x ='-90′ повернет слайд на 90 градусов против часовой стрелки.
- data-rotate-y- поворачивает слайд вокруг оси y на заданное количество градусов. Пример: data-scale-y = '90' повернет слайд на 90 градусов по часовой стрелке, а data-scale-y ='-90′ повернет слайд на 90 градусов против часовой стрелки.
- data-rotate-z- поворачивает слайд на заданное количество градусов по оси z. Пример: data-scale-z = '90' повернет слайд на 90 градусов по часовой стрелке, а data-scale-z ='-90′ повернет слайд на 90 градусов против часовой стрелки. Data-rotate эквивалентно data-rotate-z.
Создание визуализации с использованием поддерживаемых эффектов
Мы уже создали два слайда презентации. Но библиотека impression.js позволяет создавать больше слайдов с помощью разных эффектов.
Слайд 3
Для этого слайда определены значения data-x и data-y. Он будет перемещаться в направлении x и y.
<div id="slide3" data-x="2200" data-y="500">
This Slide Moves From Right To Left and Bottom To Top
</div>Слайд 4
Этот слайд имеет то же значение x, что и предыдущий, и значение y -500. Таким образом, значение data-y уменьшается по сравнению с предыдущим слайдом. Поэтому он будет двигаться сверху вниз.
<div id="slide4" data-x="2200" data-y="-500">
This Slide Moves Top To Bottom
</div>Слайд 5
Этот слайд имеет значение data-rotate 150 и увеличенное значения data-x. Поэтому он будет вращаться по часовой стрелке на 150 градусов при движении по оси х.
<div id="slide5" data-x="3200" data-rotate="150">
This Slide Rotates Clockwise Around z-axis
</div>Слайд 6
Для него задано значение data-scale. Следовательно, он будет растягиваться в три раза больше, чем предыдущие слайды.
<div id="slide6" data-x="6200" data-scale='3'>
This Slide Scales 3 Times
</div>Слайд 7
Для этого слайда определены значения x, y и z. Таким образом, он будет удаляться, и перемещаться в направлениях х и y.
<div id="slide7" data-x="4200" data-y='1500' data-z='1500'>
Away
</div>Слайд 8
Этому слайду задано меньшее значение data-z по сравнению с предыдущим. Поэтому он будет перемещаться по оси z, приближаясь.
<div id="slide8" data-x="4900" data-y='1500' data-z='100'>
Towards
</div>Слайд 9
Этот слайд будет удаляться, поскольку ему задано отрицательное значение data-z.
<div id="slide9" data-x="5600" data-y='1500' data-z='-1500'>
Futher Towards
</div>Слайд 10
Последнему слайду задано значение data-scale=10. Следовательно, он будет в 10 раз больше остальных слайдов.
<div id="slide10" data-x="6600" data-y='3000' data-scale='10'>
Visualization Slide Positions
</div>Мы закончили создавать презентацию. Полная версия исходного кода приведена далее. Я использовал отдельные стили CSS для каждого слайда.
<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" >
Creating Stunning Visualizations
Impress.js
Press Spacebar or Tab To Get Started
</div>
<div id="slide1" data-x="-1200">
This Slide Moves From Left To Right
</div>
<div id="slide2" data-x="1200">
This Slide Moves From Right To Left
</div>
<div id="slide3" data-x="2200" data-y="500">
This Slide Moves From Right To Left and Bottom To Top
</div>
<div id="slide4" data-x="2200" data-y="-500">
This Slide Moves Top To Bottom
</div>
<div id="slide5" data-x="3200" data-rotate="150">
This Slide Rotates Clockwise Around z-axis
</div>
<div id="slide6" data-x="6200" data-scale='3'>
This Slide Scales 3 Times
</div>
<div id="slide7" data-x="4200" data-y='1500' data-z='1500'>
Away
</div>
<div id="slide8" data-x="4900" data-y='1500' data-z='100'>
Towards
</div>
<div id="slide9" data-x="5600" data-y='1500' data-z='-1500'>
Futher Towards
</div>
<div id="slide10" data-x="6600" data-y='3000' data-scale='10'>
Visualization Slide Positions
</div>
</div>
<div>
Your browser <b>doesn't support the features required</b> by impress.js,
so you are presented with a simplified version of this presentation.
For the best experience please use the latest <b>Chrome</b>,
<b>Safari</b> or <b>Firefox</b> browser.
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html></pre>
<div></div>
<pre>Проверка совместимости с браузером
Визуализации, созданные с помощью Impress.js поддерживаются во всех актуальных версиях популярных браузеров.
Если браузер не поддерживает визуализации, об этом можно сообщить пользователю с помощью шаблона сообщения, доступного в библиотеке:
<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>
Your browser <b>doesn't support the features required</b> by impress.js,
so you are presented with a simplified version of this presentation.
For the best experience please use the latest <b>Chrome</b>,
<b>Safari</b> or <b>Firefox</b> browser.
</div>Что дальше?
В руководстве рассматривается создание простых презентаций с помощью Impress. Вы также можете применять к содержимому слайдов такие эффекты CSS3, такие как переходы, тени и градиенты.