Documentation
A while back, I needed to create a quick slide-show. I decided
to hack it up in HTML – mostly to make it easier to track the diffs in
version control and make it easy to distribute. There are many
frameworks out there to build sexy HTML based slideshows, but I only had
10 mins to prepare and didn’t want to take the chance of hitting a road
block – so I did it myself from scratch. Here’s how…
Step 1: Content (HTML)
Firstly, let’s get some content on the page. In my case, I just had a
list of sentences – one per slide. But you could of course do whatever
you like here – embed images, bullet lists, etc.
<!DOCTYPE HTML>
<html>
<head>
<title>My slides</title>
</head>
<body>
<section>This is the <em>first</em> slide</section>
<section>This is the <em>second</em> slide</section>
<section>This is the <em>third</em> slide</section>
<section>This is the <em>penultimate</em> slide</section>
<section>And this is the <em>final</em> slide</section>
</body>
</html>
I used the HTML 5 section element, as that is the most semantically
relevant tag. And because I’m using HTML 5 tags, I added the HTML 5
DOCTYPE.
Here’s how it looks: Example 1
Step 2: Transitions (JavaScript)
Firstly, a bit of CSS to make each <section> cover the entire
page, and hidden when the page loads (imagine a deck of cards, but you
can’t see the first one yet).
<style>
section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
</style>
Next, a bit of JavaScript at the bottom of the page to find the first section and fade it in when the page loads. I used jQuery because it makes it really easy to express this stuff.
<script>
var currentSection = $('section').first().fadeIn();
</script>
This is assigned to a the variable “currentSection” as we want to keep track of which slide we’re on for the transitions.
Now the transition. What I want to say is… “whenever the body is
clicked or a key is pressed, fade out the current section, find the next
section (which will now be referred to as currentSection), and fade
that in”.
With jQuery, that’s:
$('body').bind('click keypress', function() { currentSection = currentSection.fadeOut().next('section').fadeIn(); });
So now we have transitions (click or keypress).
Here’s how it looks: Example 2
Step 3: Prettify (CSS)
Now make it look how you want. Here’s the CSS I used:
<style>
body { color: #ffffff; background-color: #000000; font-family: arial; font-size: 40px; -webkit-user-select: none; }
section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding-top: 200px; }
em { color: #ffff00; font-family: serif; font-size: 150%; }
</style>
That’s all.
See the final result: Example 3
An advantage of building it yourself is you’re in complete control, and can make it do, well, anything.
Oh, and here’s the original slideshow I hacked this up for: 10 reasons why I’m not a cool Java developer (a 5 minute lightning talk at the Google Open Source Jam)