I Should Tell You About Revealjs
It’s a long time since I used any kind of powerpoint-ish presentation building software (2016, I think). My software of choice these days is RevealJS (https://github.com/hakimel/reveal.js/) with the occasional foray into using Big (https://github.com/tmcw/big). The premise is simple in both cases- write your presentation out in markdown or html and let javascript and css do the work to create the slide deck. This approach appeals greatly because there’s no need to plan the slides in advance, you can write them as you go, in a text editor. There’s no need to break your flow to create a new slide, or position a text box exactly where you want it to be on the page, you can just write.
Of the two, Big is simpler to use but I have never got on with how it works for positioning background images. It’s fabulous for simple text though. Since I like to use background images quite a lot though, I’ve finally settled on RevealJS. As a bonus, the more I get into using it, the more I learn how to do fun things in css. I’m not a fan of css in general, and have a complete mental block about using it in my “real work” but RevealJS is forcing me, slowly, to get over this. This blog post is as much to remind me how to do these things in future when I inevitably forget, as it is to provide a reference for others!
Quick Intro
In Revealjs, your presentation is written as one single html file. You grab a copy of the repository from https://github.com/hakimel/reveal.js, and then hack away at index.html until it meets your needs. The essentials look like this:
<html>
<head>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>
Each “slide” in your “deck” is denoted by a <section> tag in the <body> section, as shown above. You can then use normal html syntax and css styling to fancy up your elements, but basically you just write out your sections and voila you have a presentation. To use your own css you should probably add a custom.css file and reference it in the <header> section after the generic reveal css and the one for the theme you’re using, so you override any default behaviour.
The instructions are all here: https://github.com/hakimel/reveal.js/blob/master/README.md, and the functionality that I want to talk about is fragments…
Introducing fun text effects with “fragments”
Fragments (https://github.com/hakimel/reveal.js/#fragments) are used to highlight individual elements of a slide, and by default they allow elements to appear one at a time as you step through. This is great for delivering what would be a boring old list of bullet points. However, by changing Fragment behaviour, you can do all sorts of things, like highlight elements in bold, or add a ‘>’ before them as you step through. This requires an understanding of fragment events and the usage of the css “before” and “after” properties.
For example, to add a pointing-finger emoji to an element in a list as you step into it, you’d use the following css:
.reveal .slides section .fragment.pointy.current-fragment::before{
content:"👉 " ;
}
and in your html you’d mark it up as follows:
<section>
<h3>Unordered list:</h3>
<ul>
<li class="fragment pointy">Fragment 1</li>
<li class="fragment pointy">Fragment 2</li>
<li class="fragment pointy">Fragment 3</li>
<li class="fragment pointy">Fragment 4</li>
</ul>
</section>
To highlight fragments in a sentence in bold as you step into them, firstly you need to override the default behaviour where they are hidden until stepped into:
.reveal .slides section .fragment.bold {
opacity: 1;
visibility: inherit;
}
.reveal .slides section .fragment.bold.current-fragment{
font-weight: bold;
}
you’d use this in your html like this:
<section>
<p>Here's a sentence where <span class="fragment bold">this</span>, <span class="fragment bold">this</span> and <span class="fragment bold">this</span> need to be highlighted.</p>
</section>
Best of all, with some additional javascript libraries you can have even more fun! Here’s how to add rainbow sparkles to elements on your slide, inspired by https://codepen.io/simeydotme/pen/jgcvi/. It’s still a bit of a work in progress but anyhow here we go:
Firstly, I think you need to add jquery and the javascript code for the sparkles as dependencies in your html, so in the <script> section, underneath the line that initialises the main RevealJS code you need to add the following:
<script src="js/reveal.js"></script>
<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/jquery-canvas-sparkles.js"></script>
Then you need some css to define your fragment behaviour, like above:
.reveal .slides section .fragment.sparkley {
opacity: 1;
visibility: inherit;
}
.reveal .slides section .fragment.sparkley.current-fragment{
border: none;
font-weight: normal;
color:pink;
}
Then you need to set the desired behaviour of your sparkles in the html by adding a RevealJS EventListener that acts when the fragment is shown (https://github.com/hakimel/reveal.js/#fragment-events). This gets added into the <script> tag where RevealJS is initialised:
Reveal.addEventListener('sparkley', function() {
Reveal.addEventListener( 'fragmentshown', function( event ) {
// event.fragment = the fragment DOM element
var timer;
clearTimeout(timer);
$curfrag = $(event.fragment);
$curfrag.sparkle({"color": "rainbow" ,
"minSize": 5 ,
"maxSize": 10 ,
"overlap": 0 ,
"direction": "both" ,
"speed": 1,
"fadeSpeed":3000});
$curfrag.off("mouseover.sparkle")
$curfrag.trigger("start.sparkle")
.on("click");
timer = setTimeout(function(){
$curfrag.trigger("stop.sparkle");
},100);
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
$curfrag.trigger("stop.sparkle")
});
}, false );
You then reference the fragment name (in this case, sparkley) in your html as in the bold example above. The end result should look something like the following:
In conclusion, with a small amount of css fun, you can make your presentations much more interesting!