03:32 Создание великолепных визуализаций с помощью Impress.js | |
| Хотите создавать красивые слайд-шоу презентации для веб, используя только лишь 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 Инициализация Impress.js Для того чтобы использовать Impress.js, вам нужно использовать синтаксис, определенный библиотекой. Плагин проводит поиск элемента с ID impress для создания слайдов для вашей визуализации. Так что, мы создадим div с id «impress». Затем вы инициализируете библиотеку при помощи функции impress().init(), как показано в коде, приведенном ниже. Теперь мы готовы к тому, чтобы раскрыть вам все тонкости свойств Impress.js. Давайте перейдем к разработке слайдов. Приступаем к созданию слайдов Слайды, основанные на Impress.js, могут быть чем угодно и любого размера до тех пор, пока они будут подходить под критерий, определенный библиотекой. В следующем коде мы создали 2 простых слайда, которые помогут нам начать нашу презентацию. Creating Stunning Visualizations Impress.js First Slide Moves From Left To Right Impress.js Разъясняем процесс создания слайдов * Мы создали 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. То есть, он будет перемещаться ка по оси х, так и у, следовательно, здесь у нас будет диагональный переход. This Slide Moves From Right To Left and Bottom To Top Слайд 4 У данного слайда имеется установленное значение х, как и у предыдущего, а также значение у составляющее -500. Таким образом, значение data-y занижено относительно предыдущего слайда. Следовательно, он будет перемещаться сверху вниз. Если вам хочется перемещать его в обратном направлении, просто увеличьте значение data-y относительно предыдущего слайда. This Slide Moves Top To Bottom Слайд 5 Данный слайд обозначен значением data-rotate равным 150, и увеличенным значением data-x. Следовательно, он будет вращаться на 150 градусов по часовой стрелке и перемещаться по оси х. This Slide Rotates Clockwise Around z-axis Слайд 6 Данный слайд имеет значение data-scale равное 3. Следовательно, данный слайд будет в три раза больше размером, нежели остальные. This Slide Scales 3 Times Слайд 7 Данный слайд имеет установленные значения x, y и z. Таким образом, он будет отдаляться от экрана, а также перемещаться по осям х и y. Away Слайд 8 Данный слайд имеет сниженное значение data-z относительно предыдущего слайда. Следовательно, он будет приближаться к экрану. Towards Слайд 9 Данный слайд будет приближаться еще ближе, так как обозначен еще более низким значением data-z. Futher Towards Слайд 10 Наконец последнему слайду мы задаем data-scale=10. Следовательно, он будет в 10 раз больше остальных слайдов. У вас будет возможность видеть расположение всех 10 слайдов на данном этапе просмотра. Visualization Slide Positions На этом мы закончили нашу презентацию, и далее мы приводим вам полный исходный код. В данном примере мы использовали определенные CSS-параметры для слайдов. Но вы можете использовать собственные стили, и по-своему настраивать визуализацию в Impress.js. Creating Stunning Visualizations Impress.js Press Spacebar or Tab To Get Started This Slide Moves From Left To Right This Slide Moves From Right To Left This Slide Moves From Right To Left and Bottom To Top This Slide Moves Top To Bottom This Slide Rotates Clockwise Around z-axis This Slide Scales 3 Times Away Towards Futher Towards Visualization Slide Positions Your browser doesn't support the features required by impress.js,so you are presented with a simplified version of this presentation. For the best experience please use the latest Chrome,Safari or Firefox browser. Проверка совместимости с браузерами Кроме Opera, Impress.js поддерживается в свежих версиях практически любого браузера (Firefox, Chrome, Safari и Internet Explorer 10). Если браузер не поддерживается, мы можем использовать сообщение об откате, предусмотренное в библиотеке. Мы включили его в полную версию кода, представленного выше. Дополнительные стили должны быть определены, чтобы отображение производилось правильно. Весь необходимый код для сообщения от откате приведен ниже: Your browser doesn't support the features required by impress.js,so you are presented with a simplified version of this presentation. For the best experience please use the latest Chrome,Safari or Firefox browser. Что же дальше? Данное руководство рассказывает об основных методах создания визуализации, которая используется для демонстрации эффектов 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 Смотреть демо | Скачать архивом | |
|
| |
| Всего комментариев: 0 | |
