A Beginner’s Guide to Using Reveal.js for Presentations

Introduction

In our last post, we talked about FullPageOS. FullPageOS is designed to immediately boot into Chromium. With this approach, you can set up a Raspberry Pi to show one or more slides. If you’re looking to create dynamic and interactive presentations, Reveal.js is an excellent tool to consider. Reveal.js is a powerful JavaScript framework that allows you to build stunning presentations using HTML, CSS, and JavaScript. In this tutorial, we will guide you through the process of using Reveal.js to create engaging presentations that will captivate your audience. If you are interested in a more advanced use of Reveal.js, check out how we used Reveal to create a dynamic presentation.

Setting Up Reveal.js

Start by downloading the latest version of Reveal.js from the official GitHub repository. This repository has everything you need to get started.

I created a new folder called “test” and copied index.html as well as the folders dist, css, and plugin. The file, index.html, contains a template structure for the presentation. You can modify the <div class=”slides”> section to create your slides. Each <section> element represents a slide. You add headings, paragraphs, images, and other HTML elements within the <section> tags. For example, we created two slides:

<div class="slides">
    <section>
        <h1>Our First Slide</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section>
        <h1>The Next Slide</h1>
        <h2>Continuing with a Picture</h2>
        <img src="penguin.png">
    </section>
</div>

Customizing Your Presentation in Reveal.js

Reveal.js offers many options for customizing your slides. We are going to cover three areas here:

• Slide Themes
• Configuration Options
• Slide Transitions

Slide Themes

Reveal.js offers several built in themes https://revealjs.com/themes/. In the dist folder, there is a subfolder that includes the themes. We can simply set the stylesheet to the desired theme through the following code.

<link rel="stylesheet" href="dist/theme/night.css">

For me, the size of the font (40px) was a little large, so I added the following style code to the header to override the stylesheet font size.

<style>
    :root{--r-main-font-size: 28px;}
</style>

Slide Configuration

The second area of customization is the configuration of how the slides and the controls are presented. These options can be adjusted in the the reveal.Initialize() section of the code. For example, the code below removes the slide tutorial (basically the arrow bouncing so the user knows that it is there), moves the arrows to the edge instead of the bottom, and adds a slide progress indicator.

Reveal.initialize({
    // Custom configuration
    controlsTutorial: false,
    controlsLayout: 'edges',
    progress: true,
});

Below is a chart with the different options:

Here is example code.

Reveal.initialize({
    // Custom configuration
    controlsTutorial: false,
    controlsLayout: 'edges',
    progress: true,  // Show progress indicator
    slideNumber: 'c/t', // Show current slide and total number of slides
    loop: true, // Loop the animation
    autoAnimate: true, // Transition the styles
    transition: "zoom", // Add a zoom animation to every slide
    autoAnimateEasing: 'ease',
    autoAnimateDuration: 5.0,
});

Here are example slides that show the autoAnimate transition:

<div class="slides">
    <section data-auto-animate>
        <h1>Our First Slide</h1>
    </section>
    <section data-auto-animate>
        <h1 style="color:red">Our First Slide</h1>
    </section>
</div>

You can also implicitly animate the position of text. For example:

<section data-auto-animate>
    <h1>The first line</h1>
</section>
<section data-auto-animate>
    <h1>The first line</h1>
    <h1>The second line</h1>
</section>

Slide Transitions

In the previous section, we showed how to enable slide transitions in the configuration. However, you can also adjust in each slide by adding a data-transition element to each slide with the animation type. In addition, you can add data-transition-speed to control the speed of the change. For example, the following slide would zoom:

<section data-transition=”zoom” data-transition-speed=”slow”>
    <h1>Zoom transition</h1>
</section>
<section data-transition=”fade” data-transition-speed=”fast”>
    <h1>Fade transition</h1>
</section>

Code and Math in Reveal.js

Reveal.js offers built in features for including both code and math in your presentation.

For code, reveal.js includes highlight.js as a plugin. This allows you to use a code header followed by your code. I won’t go into detail on this plugin here (maybe a future post). For now, you can check out the highlight.js website.

<section>
    <pre><code>
        def hello():
            print("Hello World!")
    </code></pre>
</section>

Reveal.js also includes a math plugin that allows you to display mathematical equations. You can choose among multiple different math typesetters, including: KaTeX or MathJax.

<section>
    <h2>A Simple Integral</h2>
    \[\begin{aligned}
    \int_0^{\infty} \frac{1}{x} dx
    \end{aligned} \]
</section>

Advanced Features in Reveal.js

Reveal.js offers many advanced features, such as vertical slides, speaker notes, fragments, and more.

• Vertical slides allow you to create nested slides within a horizontal slide, providing a hierarchical structure to your presentation. Personally, I like the idea of being able to organize the presentation in this way.
• Speaker notes allow you to add additional information or reminders that are visible only to the presenter.
• Fragments enable you to animate elements on a slide, revealing them incrementally.
• Through the markdown plugin, you can format the content of the slide using markdown.

Conclusion

You have learned the basics of using Reveal.js to create interactive and captivating presentations. By leveraging HTML, CSS, and JavaScript, you can customize your presentations, add advanced features, and engage your audience like never before. As you delve deeper into Reveal.js, explore its rich documentation and experiment with the available options to create visually stunning and interactive presentations. Happy presenting!