Используйте раскрывать.js, чтобы сделать красивую веб-версию PPT

JavaScript Открытый исходный код
Используйте раскрывать.js, чтобы сделать красивую веб-версию PPT

предисловие

В последнее время я делаю ежеквартальные сводки и делюсь технологиями, поэтому мне нужно сделать PPT для обзора технического вклада за последние шесть месяцев.Однако из-за трогательной беглости запуска PPT на Mac он успешно пробудил навязчивую идею автора. компульсивное расстройство, поэтому я просто придумал способ с помощью технических средств сделать веб-версию PPT, на этот раз автор нашелreveal.js: Веб-фреймворк для создания презентаций на языке HTML, поддерживает вставку контента в нескольких форматах и ​​отображает его в форме, подобной PPT.Потребовалось 15 минут систематического исследования, и я почувствовал, что он в основном соответствует требованиям PPT для обмена технологиями, поэтому я решил использовать это решение для реализации своей веб-версии PPT.Вот для справки авторская методология технического исследования:Поэтому автор будет примерно следовать вышеперечисленным критериям, чтобы на опыте всех взять как быстро пройтиreveal.jsРеализуйте очень динамичный PPT.

текст

Сначала начнем с того, что поговорим об отсутствии PPT (непрофессиональная точка зрения, техническая перспектива):

  • Несмотря на то, что PPT мощный, он занимает много места на диске, а использование памяти во время выполнения не мало, а запуск PPT на Mac похож на поездку на зеленом поезде в Индии. С популяризацией Mac и развитием анимационных технологий один за другим появлялись новички, такие как Keynote и Prezi, которые не только легкие, но и могут достигать различных ослепительных анимационных эффектов.
  • Производство занимает много времени, ограничено платформой

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

Далее, давайте рассмотрим преимущества раскрываемости.js.

  • выявить.js может преобразовывать файлы Markdown в презентации, подобные PPT, экономя время и усилия, сокращая время набора текста, позволяя докладчикам сосредоточиться на текстовом содержании; в то же время он также приобретает гибкость, которой нет у PPT.
  • Гибкое производство и публикация, неограниченное количество приложений, неограниченное количество платформ, просто измените или откройте файл HTML.
  • Богатые особенности, поддержка переходной анимации, выделение кода, видео-фон, синтаксис Markdown, экспорт PDF и т. Д.
  • Чрезвычайно легкий, занимает меньше места и памяти

Рассказав о стольких преимуществах раскрывающихся файлов, давайте научимся их использовать.

выявить.js делает презентацию, а также основной API

Нам, фронтенд-инженерам, несложно интегрировать в наш проект vue или response.js, но как проекту речевого типа мы можем напрямую реализовать его самым примитивным образом. файлы, в частности, вы можете обратиться к шагам на официальном сайте, чтобы сделать:revealjs.com/. Самый простой способ его использования заключается в следующем:

<html>
  <head>
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/white.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

Таким образом, всего несколькими строками кода мы можем реализовать двухстраничный PPT.Конечно, мы также можем получить больше бесплатных демонстрационных анимаций, вложенных структур «родитель-потомок», специальных анимаций и т. д. Далее мы представим несколько основных API.

вложенность родитель-потомок

Вложение родитель-потомок — это, в основном, тема PPT, которая может содержать много дочерних тем. Чтобы получить документ презентации с отдельными родительскими и дочерними темами, его также очень легко реализовать в файле manifest.js. Вам нужно только поместить метку раздела внутри раздел Код выглядит следующим образом:

<div class="reveal">
	<div class="slides">
		<section>Slide 1</section>
		<section>
           <section>
            Slide 2-1
          </section>
          <section>
            Slide 2-2
          </section>
        </section>
        <section>Slide 3</section>
	</div>
</div>

Результаты, как показано ниже:

встроенный скрипт

Мы все знаем, что технический PPT должен быть неотделим от кода. Мы можем легко отображать наш код в файле manifest.js и поддерживать несколько языков. Нижний уровень его структуры объединяет известные в отраслиhighlight.js, Он используется следующим образом:

Используйте Markdown

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

Динамические фоны

rejectjs поддерживает использование пользовательских фонов (включая видео) для каждого слайд-шоу. Нам нужно только использовать data-background в теге раздела и поддерживать прозрачный фон. Конкретная демонстрация выглядит следующим образом:Фоны имеют следующие свойства, которые можно использовать:

  • data-background-image Адрес фонового изображения текущей страницы
  • data-background-size Размер фона
  • фоновая позиция data-background-position
  • data-background-repeat, как повторяется фон
  • прозрачность фона данных
  • data-background-video URL фонового видео
  • режим цикла data-background-video-loop для фонового видео
  • data-background-iframe Фон — это URL-адрес iframe.
  • Может ли data-background-interactive взаимодействовать с содержимым iframe

Fragments

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

Настроить темы

В reject.js предусмотрено множество разных стилей тем, нам нужно только представить разные css.В том числе черная (черная), белая (белая), лига, бежевая, небо (небо), ночь (ночь) и другие темы. это сами.

Переходы анимация перехода

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

  • исчезать
  • выскользнуть
  • выпуклое выпуклое вращение
  • вогнутое вогнутое вращение
  • приблизить

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

<div class="reveal">
	<div class="slides">
		<section>Slide 1</section>
		<section>
          <section data-transition="fade">
            Slide 2-1
          </section>
          <section data-transition="convex">
            Slide 2-2
          </section>
          <section data-transition="concave">
            Slide 2-3
          </section>
          <section data-transition="zoom">
            Slide 2-4
          </section>
        </section>
        <section>Slide 3</section>
	</div>
</div>

Эффект следующий:

Экспорт PDF

Экспорт PDF в качестве дополнительной функции весьма удобен, если вы хотите знать, как его использовать, вы можете обратиться кrevealjs.com/pdf-export/, Затем мы реализуем динамическую демонстрацию PPT для вашей справки.

show.js делает демонстрацию динамического PPT

Демонстрация эффекта:код показывает, как показано ниже:

<body>
	<div class="reveal">
		<div class="slides">
			<section data-background-image="./img/z1.png" data-background-opacity=".4">
      <h1>趣谈前端</h1>
      <p>徐小夕</p>
    </section>
	<section>
      <section data-transition="fade" data-background-color="orange">
        <h1>趣谈前端 Javascript</h1>
      </section>
      <section data-transition="convex" data-background-color="green">
        <h1>趣谈前端 Vue</h1> 
      </section>
      <section data-transition="concave" data-background-color="#61dafb">
        <h1>趣谈前端 React</h1> 
      </section>
      <section data-transition="zoom" data-background-color="#b32535">
        <h1>趣谈前端 Angular</h1>
      </section>
    </section>
    <section>
      <h1>NodeJS</h1>
      <pre><code data-trim data-noescape>
          const fs = require('fs')
          const Koa = require('koa')
          const app = new Koa()
          </code></pre>
    </section>
    <section>
      <h3>设计模式</h3>
      <p class="fragment">观察者模式</p>
      <p class="fragment">工厂模式</p>
      <p class="fragment">迭代器模式</p>
    </section>
    <section>
      <h4>数据结构与算法</h4>

    </section>
		</div>
	</div>

	<script src="dist/reveal.js"></script>
	<script src="plugin/notes/notes.js"></script>
	<script src="plugin/markdown/markdown.js"></script>
	<script src="plugin/highlight/highlight.js"></script>
	<script>
		// More info about initialization & config:
		// - https://revealjs.com/initialization/
		// - https://revealjs.com/config/
		Reveal.initialize({
			hash: true,

			// Learn about plugins: https://revealjs.com/plugins/
			plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
		});
	</script>
</body>

наконец

Если вы хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реального боя, добро пожаловать в нашу техническую группу в «Интересный передний конец», чтобы учиться и обсуждать вместе и вместе исследовать границы переднего плана.

больше рекомендаций

Категории