See also
Reveal.js¶
After deck.js here’s another HTML framework for creating presentation without the need to worry to much about how it looks and how it’s animated. Reveal.js does basically the same as deck.js, just different. And there are some need features as well….
How to install¶
Since the source-code is lying around on github you can simply clone the repository to your hard-disk:
$ git clone https://github.com/hakimel/reveal.js/ github.reveal.js
Then you’ve got everything you need:
github.reveal.js-git$ ls -1
css
index.html
js
lib
LICENSE
package.json
plugin
README.md
How to use¶
Basically everything you need to know is explained within the README.md file in the root directory.
You basically create a HTML document (like the included index.html) and build up a nested structure with the section-tags:
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3>
</section>
<section>
<h2>Heads Up</h2>
<p>
reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
support for CSS 3D transforms to see it in its full glory.
</p>
<aside class="notes">
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
</aside>
</section>
<section data-markdown>
## Markdown support
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
<pre><code contenteditable style="margin-top: 20px;"><section data-markdown>
## Markdown support
For those of you who like that sort of thing.
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
</section>
</code></pre>
</section>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">◄</a>
<a class="right" href="#">►</a>
<a class="up" href="#">▲</a>
<a class="down" href="#">▼</a>
</aside>
<!-- Presentation progress bar -->
<div class="progress"><span></span></div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
]
});
</script>
</body>
</html>
All you basically care about is everything between:
<section>
...
</section>
Since there’s plain HTML in between everything else are just included java-script and CSS-style files, which you don’t need to mess with.
Browser-Compatibility¶
One of the nice things about reveal.js is that it didn’t break with my Opera browser. The animation looked totally OK and it just was in the text, that I discovered I was supposed to see some kind of Cube-effect, which I wasn’t. Was actually was happening was that the fall-back script were taking care of alternative animations, since the cube-effect doesn’t work on Opera. If I wanted it, I had to use Firefox or so. But who cares really about the slide-changing-effects in a presentation?
Links: