0
0
Hello MrBool readers, in this article we will talk about the Presentations. Presentations are no longer limited to specific platforms and software - nowadays you can create slides using the browser and technologies like HTML5, CSS3 and JavaScript.
One of responsible for this is the JavaScript library reveal.js, created by Hakim El Hattab, developer best known for his experiments with CSS3 animations.
In this article we will create a basic presentation and learn about the options available to customize our slides.
Let's start by downloading the latest version of the library reveal.js available on GitHub: https://github.com/hakimel/reveal.js/downloads.
That done, just create an index.html file and copy the library files to the directory of the presentation. Our initial HTML looks like this:
Listing 1: Initial HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Presentation Example MrBool.com</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css">
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides"></div>
</div>
</body>
</html>
The presentation must follow a pre-defined structure: the library will look for a div with the class reveal that contains another div with the class slides.
The element div.slides receive the slides of our presentation. The slides must be elements of type section. So let's add our three slides to the presentation.
After this, our code will looks like Listing 2.
Listing 2: Adding slides to the presentation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Presentation Example MrBool.com</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css">
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Presentation on browser</h1>
<h3>Presentation Example MrBool.com </h3>
</section>
<section>
<h1>About Author</h1>
<ul>
<li>1 year experience</li>
<li> MrBool Author</li>
</ul>
</section>
<section>
<h1>reveal.js</h1>
<ul>
<li>Developed by Hakim El Hattab</li>
<li>open source</li>
</ul>
</section>
</div>
</div>
</body>
</html>
The last step is starting the object Reveal:
Listing 3: Starting the object Reveal
<script>
Reveal.initialize();
</script>
Our code will now look like this:
Listing 4: Last code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Presentation Example MrBool.com</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css">
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize();
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Presentation on browser</h1>
<h3>Presentation Example MrBool.com </h3>
</section>
<section>
<h1>About Author</h1>
<ul>
<li>4 years experience</li>
<li> MrBool Author</li>
</ul>
</section>
<section>
<h1>reveal.js</h1>
<ul>
<li>Developed by Hakim El Hattab</li>
<li>open source</li>
</ul>
</section>
</div>
</div>
</body>
</html>
Now just open the index.html file in your browser and check the result.
The initialize method can receive as parameter an object with the options of presentation. You can, for example, hide the navigation controls, enable keyboard navigation, change the transition effect of the slideshow, among others.
We now change our startup, changing some settings:
Listing 5: Changing settings
Reveal.initialize({
autoSlide: 7000,
center: true,
controls: false,
mouseWheel: true,
transition: 'concave'
});
With the above settings we enabled automatic exchange of slides after 7 seconds, centralize content of our slides, we disable the navigation controls, we have enabled navigation using the mouse wheel, and change the transition effect of the slideshow to the 'concave'.
To check out a complete list of available options, read the README of the project on github.To use fragments with reveal.js is simple, you just need to add the class fragment to one or more content within a slide.
Let's change our slide "About the Author" and display the list of items in a fragmented way:
Listing 6: Fragments
<h1>About Author</h1>
<ul>
<li class="fragment"> 1 year experience</li>
<li class="fragment"> MrBool Author</li>
</ul>
Updating the presentation in the browser to get the slide above, the elements of the list are shown step by step.
In addition to the default theme, the library reveal.js offers other topics for our presentations. They are: beige, night, serif, simple and sky.
To use a different theme, just change the default CSS link to the desired theme. In the example below we are using the theme night.
Listing 7: Re-linking CSS
<link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/night.css">
Another way to modify and extend our presentation is to use the plugins package that comes with the library. Within the directory plugin extensions are available to add content with Markdown, zoom, notes and highlight code.
To activate a plugin, simply add the option dependencies in initialization of object Reveal:
Listing 8: Zoom Plugin
Reveal.initialize({
autoSlide: 7000,
center: true,
controls: false,
mouseWheel: true,
transition: 'concave',
dependencies: [{ src: 'plugin/zoom-js/zoom.js' }]
});
In the above example we enabled the zoom plugin. Now, by using the combination alt + mouse click apply zoom in / zoom out on the slides.
Our example will look like this:
Figure 1: Example result
Our code will looks like this:
Listing 9: Full source code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Presentation Example MrBool.com</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/night.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Presentation on browser</h1>
<h3>Presentation Example MrBool.com</h3>
</section>
<section>
<h1>About the Author</h1>
<ul>
<li class="fragment">4 years experience</li>
<li class="fragment">MrBool Author</li>
</ul>
</section>
<section>
<h1>reveal.js</h1>
<ul>
<li>Developed by Hakim El Hattab</li>
<li>open source</li>
</ul>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({
autoSlide: 7000,
center: true,
controls: false,
mouseWheel: true,
transition: 'concave',
dependencies: [
{
src: 'plugin/zoom-js/zoom.js',
async: true
}
]
});
</script>
</body>
</html>
If you want to download the source code, you can do it at the article's beginning.
You can see the DEMO in this link.
That was just one part of what the reveal.js library offers. You can even create their own themes (the themes directory includes a skeleton in Sass), take advantage of the JavaScript API object Reveal (with methods to control navigation of slides), listening to events triggered by exchange of slides and debris, among other things.
Besides the JavaScript package, you can create your presentations using the service www.rvl.io, without the need to code.
I Hope you liked the article, see you next time.
See the prices for this post in Mr.Bool Credits System below: