Создавайте слайдеры и презентации с помощью Reveal.js

Много раз, когда нам нужно сделать слайдер или слайд-шоу, мы используем программное обеспечение, такое как Powerpoint или Prezi, в настоящее время существует множество платформ, которые позволяют нам делать презентации такого типа с использованием технологий Html5, Jquery и Css 3.

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

Reveal - это платформа, разработанная в Javascript, которая предоставляет функциональные возможности для создания слайдеров и презентаций с функциями, которые позволяют управлять слайдами и управлять ими, экспортировать PDF, контролировать время, навигацию и эффекты каждого устройства.

Reveal является бесплатной библиотекой и имеет большое преимущество в том, что мы можем программировать, подключаться к базам данных или включать в любое приложение, поддерживающее HTML и Javascript, то, что не может сделать самое известное программное обеспечение.

Разработка с Reveal проста, и нам просто нужно знать Html и Js, чтобы начать создавать презентацию, мы должны скачать библиотеку Reveal.js с официального сайта.

Затем мы распаковываем zip-файлы, чтобы начать обучение. Мы начнем с простого примера, чтобы попробовать Reveal.js.

Из каталога, который мы распаковываем, мы копируем папки css, js, plugins и lib в нашу папку Example01. Эти папки содержат все библиотеки, необходимые для создания нашей презентации.

Далее мы создадим слайдер с двумя изображениями и текстом, по которым вы можете перемещаться автоматически или с клавиатуры. Это будет следующим:

Исходный код выглядит следующим образом:

 Reveal.js Пример 01
AUDI R8 
Спортивный автомобиль
AUDI R8 
Посетите наш сайт 
КОНСАЛТ
Reveal.initialize ({autoSlide: 3000, loop: true}); 

Платформа Reveal предоставляет нам несколько тем или дизайн CSS, которые мы можем найти в папке CSS, и, изменив строку темы, мы можем изменить дизайн.

Мы применяем тему Beige и визуализируем с помощью эмулятора мобильных устройств в Firefox и видим, что библиотека отвечает за создание адаптируемого дизайна.

Работа ползунка обеспечивается кодом Javascript:

 Reveal.initialize ({autoSlide: 3000, loop: true}); 

Если мы хотим, чтобы ползунок перемещался автоматически, мы будем указывать время перехода в миллисекундах с помощью параметра autoSlide, в случае если он не используется, его необходимо перемещать стрелками с помощью клавиатуры или мыши.

Веб-разработчики используют этот тип библиотеки для выделения gif, flash и других форматов анимации, этот тип фреймворка даже позволяет использовать слайдер для SEO, поскольку текст индексируется. Мы также можем использовать его как онлайн, так и в автономном режиме, чтобы показать нашу презентацию с мобильного или мобильного телефона, используя любой браузер.

Платформа Reveal.js состоит из одного файла JavaScript и двух файлов таблиц стилей. В первой таблице стилейique.css определены некоторые распространенные стили, а во второй содержится дизайн стандартной темы, мы также можем добавить третью таблицу стилей с нашими собственными классами.

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

Мы можем использовать другие библиотеки, такие как 3D CSS или WebGL вместе с Reveal.js.

Платформа Reveal позволяет использовать различные параметры конфигурации и плагин для улучшения взаимодействия с пользователем. Параметры конфигурации, которые нас интересуют больше всего:

управления

Этот параметр указывает, что для навигации по слайдам отображаются клавиши со стрелками. Если мы ничего не указываем, он отображается по умолчанию. Может принимать значение true или false.

$config[ads_text5] not found

прогресс

Показать индикатор выполнения во время презентации. Может принимать значение true или false.

slideNumber

Показывает текущий номер устройства. Может принимать значение true или false.

клавиатура

Включить или отключить взаимодействие с клавиатурой. Может принимать значение true или false.

потрогать

включить или отключить использование сенсорных экранов, если оно у вас есть. Может принимать значение true или false.

петля

означает, что когда вы достигнете конца, вернитесь к началу и продолжайте без остановки, если мы введем false, он остановится, когда вы достигнете конца.

Может принимать значение true или false.

Autoslide

Это время в миллисекундах для автоматического переключения с одного слайда на другой.

$config[ads_text6] not found

переход

тип перехода между слайдами. Вы можете принять значения faul, none, fade, slide, Выпуклый, вогнутый или zoom.

Очень интересным примером является официальное демо, которое можно использовать для практики, а также загрузить его с официальной страницы Reveal.js.

Если мы хотим добавить вертикальный слайдер, мы должны создать вложенные разделы следующим образом:

 Вертикальный слайд 1 Подставка вертикальная 1.1 Подставка вертикальная 1.2 

Далее мы сделаем Example02, где мы будем включать другие функции, такие как фрагменты, которые готовы в HTML, которые отображаются при нажатии клавиши в ходе презентации.

Презентация будет хакерским курсом с компьютерными слайдами.

Исходный код будет следующим:

 Курс этического взлома
Курс этического взлома 
Изучите Защитную Компьютерную Безопасность 
$config[ads_text5] not found
повестка дня 
Обнаружение уязвимостей и контроль
Тестирование на проникновение: Методы.
Администрирование сетевой безопасности серверов Linux Администрирование серверов Windows / раздел>
Reveal.initialize ({autoSlide: 3000, loop: true, переход: 'вогнутый'}); 

Фрагменты указывают, что каждый элемент в списке будет отображаться в ходе презентации, если класс фрагмента не указан, список будет отображаться полным, а не по одному за раз.

Мы также указали вертикальные секции, которые являются суб-слайдами, чтобы показать другие слайды в данном разделе.

$config[ads_text6] not found

Платформа Reveal.js является одним из самых популярных вариантов создания презентаций с использованием HTML, поскольку она может использоваться на любом устройстве и не требует установки или разработки программного обеспечения.

Мы рассмотрим некоторые из его основных функций в этой статье, но есть еще много доступных.

Google экспериментирует с технологией WebRtc, технологией, которую мы видели в аудио- и видеосвязи WebRTC из учебника Browser и Reveal.js, чтобы вы могли выполнять движения устройства с помощью жестов рук через веб-камеру. Калибруя веб-камеру с помощью WebRtc и просто перемещая руку в воздухе, мы можем изменить слайд.

Мы видим проект Google, который находится в бета-фазе Google Chrome с Gestures + Reveal.JS, где вы можете увидеть несколько демонстрационных видеороликов, которые тестируют технологию.

• 
• 0