A RevealJS Tutorial On Using It To Prepare a Lightning Talk

A RevealJS Tutorial On Using It To Prepare a Lightning Talk

So if you’re in a rush to prepare a lightning talk and just need to throw some slides together, this post is for you.

The idea behind it is that in every presentation, you’ll probably need background images and animation effects with your bullet points.

This tutorial aims to speed up that process for you.

Step 1: Clone the repository and setup your css/js files

One easy way to get started is to clone the revealjs repository and modify the index.html file.

Step 2: Adding animation effects to your bullet points

If you want to add animation effects to your bullet points, adding a “fragment fade-up” class to your html element is an easy way to do this. There are also “fade-left”, “fade-right”, and “fade-down” options.

If you want to the text to change color as you move to each bullet point, you can add a “fragment highlight-green” class. The example html code below shows this.

<section>
  <h2>Beyond Rails</h2>
  <ul class="fragment fade-up">
    <li class="fragment highlight-green">Elixir...</li>
    <li class="fragment highlight-green">Phoenix...</li>
  </ul>
</section>

Step 3: Adding background images

To add a background image, you need to add a “data-background-image” property to the section tag and then point it to an image.

<section data-background-image="./presentation_images/money-163502_640.jpg">
  <h2>Beyond Rails</h2>
  <ul class="fragment fade-up">
    <li class="fragment highlight-green">Elixir...</li>
    <li class="fragment highlight-green">Phoenix...</li>
  </ul>
</section>

Step 4: Adding background image opacity with CSS

If you want to add opacity to a background image, you need to add the “data-state” property in the section tag along with some custom css.

<section
  data-background-image="./presentation_images/money-163502_640.jpg"
  data-state="bgimg-money"
>
  <h2>Beyond Rails</h2>
  <ul class="fragment fade-up">
    <li class="fragment highlight-green">Elixir...</li>
    <li class="fragment highlight-green">Phoenix...</li>
  </ul>
</section>

Now that the data-state property has been added, it’s time to add some image opacity using the following code.

html.bgimg-money .slide-background { opacity: 0.3 !important; }

According to this post, it’s important to attach the bgimg-money class to the html tag.

Summary

Hopefully this revealjs tutorial helped you get off the ground so you can give your first lightning or conference talk!