Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now

Where to Use an HTML slide presentation in reveal JS?

Reveal.js is a framework for creating beautiful presentations using HTML. It has sleek features such as markdown content, nested slides, PDF exports, and JavaScript APIs to control slide navigation. Presentations are written using HTML using Reveal.js.

Setting Up reveal.js

Before using reveal.js, you should have both Node.js and Grunt installed on your machine. The next steps are to clone the reveal.js repository from GitHub, install all of the dependencies, and start the revealed server.

Creating a Presentation

A presentation reveals the HTML pages slide. Before the end of the body tag, we have a script that is key to the presentation configuration. There are several options that we can configure. For example, we can optionally show presentation progress, can enable the transition, and set a theme for our presentation. Once, we start adding slides in your presentation that we will dig deeper.

Slides

Now, we’ll start adding slides to your presentation letter. Using this HTML, add your first slide. Section represents elements slide. As an example illustrated by the nested classes, we can also nest within the other slides.

Save your file and restart the server using the command grunt serve. You should look at the slides went created our new. Note that the arrow can be controlled slides using keys. Although this functionality is enabled by default, you can configure the behavior by using the keyboard in the really Reveal.js initialize () method.

Themes

There are many themes available such as Beige, Solarized, and Sky which are located in CSS / Theme. To use them, you’ll just have to change the default style on your page, as shown in the following example.

Transitions

The infection can be revealed of style and speed. Using the initial () transition and transition speed parameters. An example of this is shown below.

Markdown Slide Content

If you want to encourage you to write your slides using Markdown so fans Markdown. Just add a data-markdown attribute to your section tag, and wrap your content inside the tag as shown below.

Tagged : / / / /

How to create an HTML slide presentation in reveal JS?

In this tutorial i’m going to desribe how to create an HTML slides presentation In Revealjs. Plz follow some easy step mentioned below. Complete slides found here repository from https://github.com//reveal.js, and you can implement this slides structure in your own slides.

Each “slide” in your “deck” is denoted by a
tag in the section, as shown above. You can then use normal HTML syntax and CSS styling to fancy up your elements, but basically, you just write out your sections, and voila you have a presentation. To use your own CSS you should probably add a custom.css file and reference it in the section after the generic reveal CSS and the one for the theme you’re using, so you override any default behavior.

For example, to add a pointing-finger emoji to an element in a list as you step into it, you’d use the following CSS:

and in your html you’d mark it up as follows:

To highlight fragments in a sentence in bold as you step into them, firstly you need to override the default behavior where they are hidden until stepped into:

you’d use this in your html like this:

Best of all, with some additional javascript libraries you can have even more fun! Here’s how to add rainbow sparkles to elements on your slide. It’s still a bit of a work in progress but anyhow here we go:

Firstly, I think you need to add jquery and the javascript code for the sparkles as dependencies in your HTML, so in the <script> section, underneath the line that initializes the main RevealJS code you need to add the following:

Then you need some CSS to define your fragment behavior, like above:

Then you need to set the desired behavior of your sparkles in the HTML by adding a RevealJS EventListener that acts when the fragment is shown(https://github.com/hakimel/reveal.js/#fragment-events). This gets added into the <script> tag where RevealJS is initialized:

Tagged : / / /