MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create presentations in the browser with reveal.js

In this article we will talk about the presentations, we will see how to create presentations in the browser with reveal.js, an powerful javascript library.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

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.

Structure of presentation

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.

Options

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.

Fragments

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.

Themes & Plugins

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:

Example result

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.

Conclusion

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.



Front-end developer and WebEditor of MrBool.com. I work in the web design area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br or if you prefer send me an email.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login