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

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

Рекомендуемое чтение: синхронизировать слайды веб-презентации с Impress.Js и Impressr [Quicktip]

Начало работы с выявлением
В этом посте я проведу вас через базовую реализацию Reveal.js. Давайте начнем с загрузки копии этого хранилище, Загруженный файл содержит следующие папки:

• CSS: основной стиль
• js: javascript зависимости
• плагин: некоторые компоненты, разработанные как расширение Reveal.js
• lib: все другие сторонние ресурсы (JavaScript, CSS, шрифты)

Теперь мы будем называть все зависимости, которые должны быть включены. В разделе заголовка назовите основной стиль, а также тему, которую хотите использовать (укажите идентификатор «theme»). Доступные темы: дефолт, небо, бежевый, просто, засечка, ночь, Луна а также соляризации, Для этой демонстрации я просто использую стандартную, например, так:

И до конца тега body включите следующий javascript:

HTML-разметка
В этом руководстве давайте предположим, что мы создадим три основных слайда с использованием некоторых HTML-кодов. Есть три основных элемента для создания слайдов презентации. Они есть:

<

div class=”reveal”>,

<

div class=”slides”> а также

<

section>,

в

<

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

<

section> внутри. Вот пример:

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

Для вступления я собираюсь отформатировать заголовок с помощью h1, а вспомогательный заголовок – с помощью h3 следующим образом:

Теперь для второго слайда я буду использовать несколько слов для фрагмента. Чтобы создать фрагментированный вид, вам потребуется удвоить сечение, как при создании вертикального слайда. Затем включите подраздел с идентификатором фрагментов и классом фрагмента в элемент контента следующим образом:

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

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

Изюминка

Это один из очень популярных Эрик Кантона цитаты:

<blockquote>

    «Когда чайки следуют за траулером, это потому, что они думают, что сардины будут выброшены в море. Большое спасибо."
</blockquote>
<p>щелчок <a href="#">Вот</a> чтобы вернуться на первую страницу.</p>

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

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

Теперь у нас есть симпатичный слайд для презентации. Это вступление:
Это наш фрагментарный взгляд:
И это последний слайд:
Вывод
С помощью этого инструмента вы можете создать отличную HTML-презентацию на своем сайте. Вы можете найти несколько примеров для вдохновения Вот, По сравнению с другими впечатляющими библиотеками презентаций, такими как Impress.js Reveal, на мой взгляд, по-прежнему намного мощнее с точки зрения возможностей.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)