Reveal.js – The HTML Presentation Framework
Doing presentations in PowerPoint is something 90’s kids were doing, nowadays presentations are framed online using various advanced tools. Similarly, we found a framework for building beautiful presentations using HTML that is Reveal.js
Reveal.js – The HTML Presentation Framework is built keeping many things in mind. The framework is really easy to use and all the slides, presentations written in the framework use HTML Markup.
Excited to know more about Reveal.js then let’s continue with our HTML presentation template guide.
Previously, I have already written this Tutorial: Make Video Embeds Responsive. You should check this out as well, if you are looking to make your Video Content completely responsive to any device layout and width with the best aspect ratio maintained.
How to use Reveal.js – Comprehensive Guide
The very first step to start using reveal.js is to download the required files from the GitHub Repository.
The next step is to include all the files in the <head> section of the webpage.
The CSS files to be included in the <head> section.
<link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme">
Include the Javascript files before the closing </body> tag.
<script src="lib/js/head.min.js"></script> <script src="js/reveal.min.js"></script>
Reveal.js CDN:
If you don’t download the javascript files of the framework you can also use the content delivery network (CDN) of the library which will directly integrate the javascript files from the remote server.
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.4.1/js/reveal.min.js"></script><br>
Now let’s start with the basics:
The important classes of Reveal.js Framework
<div class="reveal"></div>
This class is similar to a wrapper class. The class ‘reveal’ wraps the entire slide show into a container.
<div class="slides"></div>
This ‘slide’ class wraps a particular presentation slide in a container which in turn is wrapped by the ‘reveal‘ class.
<section>Element</section>
The section element is the most important element which represents the entire slide content and requires no class as it is a predefined tag in HTML.
The basics of the Javascript code to implement if you are looking out to output the correct results.
<script>
Reveal.initialize({
});
</script>
These were the basics of the framework and now comes advanced customization of the framework.
Recommended Readings:
Let’s deal with a simple program to make a slide:
<body>
<div class="reveal">
<div class="slides">
<section>This is first horizontal slide of Tuluzz</section>
</div>
</div>
</body>
The Javascript Code that will initiate the framework:
<script>
Reveal.initialize({
theme: 'sky',
});
</script>
The above code will output a single slide with the content written on it in a sky blue colored background as we have provided it with a sky theme.
This is how we create Horizontal HTML Framework Presentation slides from reveal.js
Now to create more slides in the presentation just introduce with more sections in the markup.
<body>
<div class="reveal">
<div class="slides">
<section><h2>This is first horizontal slide of Tuluzz.com</h2></section>
<section><h2>This is second horizontal slide of Tuluzz</h2></section>
<section><h2>This is third horizontal slide of Tuluzz</h2></section>
</div>
</div>
</body>
Now let’s learn How to create Vertical slides in Reveal.js
It was just so easy I also was not aware of, you must just have to place multiple section elements inside of another section. See below for more:
<div class="reveal">
<div class="slides">
<section><h2>This is first horizontal slide of Tuluzz.com</h2></section>
<section>
<section><h3>This is vertical slide of Tuluzz</h3></section>
<section>This is another vertical slide of Tuluzz</section>
</section>
</section>
</div>
</div>
So, I think that was easy to do with the slides either horizontal or vertical.
Let’s go further deep in yo the framework and know about its control.
Reveal.js Configurations:
These below configurations are set to their default values, if you want to configure your presentation slides then you have to set the defined values in the configurations.
controls: true, //If you want to display controls of the slides
progress: true, // If you want to display a presentation progress bar in the slides.
slideNumber: false, // If you want to display the page number of the current slide
history: false, // Push each slide change to the browser history
shuffle: false, // Randomizes the order of slides each time the presentation loads
touch: true, // If you want to enable touch navigation on devices with touch input
fragments: true, // It will turn fragments on and off globally
help: true, // This will flag if we should show a help overlay when the question mark key is pressed
showNotes: false, // This configuration flags if speaker notes should be visible to all viewers
previewLinks: false, // this configuration will open links in an iframe preview overlay
transition: ‘slide’, // Transition styles some more are: none/fade/slide/convex/concave/zoom
width: 960, // this controls the width of the presentation
height: 700, // this controls the height of the presentation
autoSlide: 5000 //sets the slide to auto slide after 5 seconds (in ms)
There are many more configuration options that will help you customize you more and more.
Know More About all these:
Linking Slides with one another:
If you want one slide to link the another slide then it follows giving the ID to the elements and then linking the id to the another element.
<section id="custom-link"> <p>This is tuluzz.com paragraph</p> </section> <section> <h1>Slide 3</h1> <p>How does one revisit an arbitrary slide in code?</p> <p>Visit internal slide<a href="#custom-link"> 2</a> </section>
Now if you want the last slide to link to the first slide then just give the ‘#‘ tag in the link and the slide will automatically navigate to the first slide.
<section><h3>This is vertical slide of Tuluzz</h3>
<p>Click <a href="#">here</a> to get back to the first page.</p>
</section>
Reveal.js Themes:
Now this section will teach to beautify your presentation using reveal.js templates of the framework.
Note: Each theme is available as a separate stylesheet. If you want to change your default theme then you will need to replace the theme with a custom theme of your choice in the stylesheet. Download the stylesheet of the theme from the GitHub repository.
<link rel="stylesheet" href="css/theme/sky.css" id="theme"> OR <link href="//cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/css/theme/sky.css" id="theme" rel="stylesheet">
If you are looking for more HTML5 Presentation Frameworks, here is a nice list of 5 such frameworks by Sitepoint.
If you want to check out the reveal.js demo by tuluzz.com then click here.
This was also just awesome. So I think you have learned a lot today. Now I think you can create you own HTML presentation slides using the HTML Presentation Framework – Reveal.js
![\"DMCA.com](\"//images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=4d9e9c3d-af1d-4344-95f0-d4db66a25c1f\")
Leave a Reply