Как создавать визуализации и презентации с помощью 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 type="text/javascript">impress().init();</script>
		<script type="text/javascript" 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

Для этого слайда определены значения xy и 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 type="text/javascript" src="js/impress.js"></script>
        <script type="text/javascript">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, такие как переходы, тени и градиенты.

Данная публикация представляет собой перевод статьи «How to Create Stunning Visualizations & Presentations with Impress.js» , подготовленной дружной командой проекта Интернет-технологии.ру