Хотите создавать красивые слайд-шоу презентации для веб, используя только лишь HTML и CSS? С Impress.js это больше не проблема, так как это полноценная платформа трансформаций в CSS3, которая позволяет вам конвертировать HTML-контент в слайд-шоу с великолепными эффектами.
Impress.js – это jQuery-плагин, созданный на просторах github пользователем bartez, который использует CSS3-функционал для создания презентаций. Все современные браузеры будут поддерживать великолепные визуализации, созданные с помощью Impress.js.
Скачивание и установка Impress.js
Скачивайте Impress.js с ресурса github. Кликните по кнопке zip, как показано на скриншоте ниже и библиотека 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. Мы покажем вам код для каждого слайда и объясним, за что конкретно отвечает каждый отдел.
Слайд 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.
Смотреть демо | Скачать архивом
