Friday, June 5, 2015

Image Overlays in reveal.js

Update notice: I've noticed this page is getting a few hits, so I've done an update with an alternate technique that I've used in preference to the one below, which had some issues with scaling at different resolutions.

reveals.js is a fantastic little library for creating web-based presentations.

While putting a presentation together I was trying to work out how to quickly throw up images as overlays over the presentation text at the start of a slide, and then disappear to reveal the text.

With the help of a colleague, we worked out a couple of techniques you can apply using the reveal.js "fragment" and "current-visible" option combined with an absolute position.

Option 1 simply overlays the image and has it disappear as the next action in the presentation:

<img class="fragment current-visible" src="image.jpg"
style="position:absolute; left:210px; top:100px;"/>

For Option 2, I added a link so you can get the full-sized image if you want:

<p class="fragment current-visible"
style="position:absolute; left:120px; top:100px;">
<a href="image.jpg"><img src="image.jpg" width="1024"/></a></p>

The way reveal.js scales a presentation to a nominated size in the configuration means the absolute positioning isn't as bad to work in as it would be in a "normal" web page, you only have to get the position right once for the desired image width and it will work due to the scaling factor. It may not be the most elegant way, but it works pretty well.

Okay, let's be honest, my colleague worked it all out, I just watched. Thanks GD!

No comments:

Post a Comment