preface

Recently, I am making quarterly summary and technical sharing, so I need to make a PPT to review the technical contributions in the past six months. However, due to the touching smoothness of PPT running on MAC, the author’s obsessive-compulsive disorder was successfully aroused. Therefore, I tried to make a web version of PPT through technical means. At this time, the author found outreveal.js: A Web framework for creating presentations using HTML, allowing you to insert content in a variety of formats and present it in a PPT-like formatI spent 15 minutes on systematic research and found that it basically met the requirements of technical sharing PPT, so I decided to adopt this scheme to realize my web version of PPT. Here is a list of the author’s technical research methodology for your reference:So the author next roughly according to the above several measurement standards, to take you together to feel how to quickly passreveal.jsTo achieve a dynamic PPT.

The body of the

First of all, the author will talk about the shortcomings of PPT (non-professional perspective, technical perspective):

  • PPT is powerful, but it takes up a lot of disk space and memory at runtime. And running powerpoint on a MAC is like riding a green train in India. With the popularity of Macs and the development of animation technology, new arrivals like Keynote and Prezi have emerged, which are lightweight and can achieve a variety of dazzling animation effects.
  • Production takes a lot of time and is platform constrained

Therefore, for technical workers who are not familiar with PPT routines, it is often difficult to quickly produce exquisite PPT.

Let’s take a look at the advantages of reveal.js.

  • Reveal.js can turn Markdown files into powerpoint presentations, which is light and effortless, reduces typeset time and enables speakers to focus more on text content. At the same time, you get flexibility that powerpoint doesn’t have
  • Make and publish flexible, no limit application, no limit platform, just need to modify or open HTML file
  • Rich features that support transition animations, code highlighting, video backgrounds, Markdown syntax, PDF export, and more
  • Extremely lightweight, takes up little space and memory

Having said so much about the benefits of Revealjs, let’s learn how to use it.

Reveal.js makes the introduction as well as the core API

As a front-end engineer, it is easy to integrate reveal.js into our Vue or React projects, but as a speech project, we can implement it in the original way. First, we need to introduce relevant files. For details, please refer to the steps on the official website:revealjs.com/. The simplest way to use it is as follows:

<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>
Copy the code

In just a few lines of code, we can make a two-page powerpoint presentation.Of course we can also achieve more free demo animation, parent-child nesting structure, special animation and so on. Let’s look at a few core apis.

Father and son are nested

Parent and child nesting is mainly a PPT theme that may contain many sub-themes. To achieve a presentation document with distinct parent and child themes, it is also easy to achieve in reveal.js. You only need to wrap the section tags inside the sections. The code is as follows:

<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>
Copy the code

The effect is shown below:

Embedded script

We all know that technical PPT must be inseparable from code. We can easily display our code in reveal.js, which supports multiple languages and integrates the framework with well-known ones in the industryhighlight.js. The usage is as follows:

Use the Markdown

Markdown is a popular document writing tool for technical workers, and Revealjs also supports Markdown for PPT writing, isn’t it appropriate? Specific methods are as follows:

Dynamic background background ds

Revealjs supports a custom background (including video) for each slide. We only need to use data-background in section tags and support background transparency. Specific demo is as follows:Backgrounnds has the following properties to use:

  • Data-background-image Indicates the background image address of the current page
  • Data-background-size Specifies the background size
  • Data-background-position Indicates the background position
  • Data-background-repeat The way the background repeats
  • Data-background-opacity of background
  • Data-background-video Indicates the address of the video background
  • Data-background-video-loop Indicates the loop mode of the video background
  • Data-background-iframe Indicates the URL of an IFrame
  • Data-background-interactive Indicates whether it can interact with iframe content

Fragments

Fragments are used to highlight or progressively present elements. Each element that contains the Fragment class name is treated as a progressive element and is displayed in the slide by clicking next.

Custom Theme

Reveal.js offers a variety of themes in different styles, so we just need to introduce different CSS. Themes include Black, White, League, Beige, Sky, Night, etc. You can feel it for yourself.

Transitions animation

The way different slides enter the page can be animated using Transitions. The following are the default transitions provided:

  • Fade out
  • Slide, slide out
  • The convex surface rotates
  • The concave turns around
  • Zoom zoom

Specific demo implementation is as follows:

<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>
Copy the code

The effect is as follows:

Export PDF

Export PDF as an additional function is also more thoughtful, if you want to know how to use can refer to revealjs.com/pdf-export/. Next we will implement a dynamic PPT demo for your reference.

Reveal. Js to create a dynamic PPT demo

Effect demonstration:The code is as follows:

<body>
	<div class="reveal">
		<div class="slides">
			<section data-background-image="./img/z1.png" data-background-opacity="4">
      <h1>Anecdotal stories front end</h1>
      <p>Xu Xiaoxi</p>
    </section>
	<section>
      <section data-transition="fade" data-background-color="orange">
        <h1>Interesting front-end Javascript</h1>
      </section>
      <section data-transition="convex" data-background-color="green">
        <h1>Interesting front-end Vue</h1> 
      </section>
      <section data-transition="concave" data-background-color="#61dafb">
        <h1>React</h1> 
      </section>
      <section data-transition="zoom" data-background-color="#b32535">
        <h1>Interesting front-end 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>Design patterns</h3>
      <p class="fragment">Observer model</p>
      <p class="fragment">The factory pattern</p>
      <p class="fragment">Iterator pattern</p>
    </section>
    <section>
      <h4>Data structures and algorithms</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>
Copy the code

The last

If you want to learn more about H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and combat, welcome to join our technology group in “Interesting Talk Front-end” to learn and discuss together, explore the frontier of the front-end together.

More recommended

  • Quickly implement SSR (server rendering) in your Vue/React application
  • Summary of several common sorting algorithms and search algorithms necessary for programmers
  • Micro front-end architecture and my front-end technology inventory
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS
  • Vue and React
  • From zero to one teaches you to develop a component library based on VUE
  • Build front-end team component systems from 0 to 1
  • 8 frequently used custom hooks by hand in 10 minutes
  • 15 minutes on javascript design patterns that front-end engineers must know (with detailed mind maps and source code)