Unmatchable jQuery Plugin For Exhibition of HTML Framework – Reveal.js

Demo    Download
The HTML Presentation Framework-Reveal
File Size: 54.73 KB
Views Total: 753 views
Last Update:November 24, 2020
Publish Date: April 25, 2020
Official Website: Go to website
License: MIT

Reveal.js is a competent HTML presentation library jQuery plugin. It offers an amazing animation of sliding the distinctive tabs inside any website. Meanwhile, when a user switches the tab horizontally and vertically in a flitter way with some allotted arrows or symbols, an individual gets the discrete information at different tab. There is no need to scroll your mouse to get up to the necessary data informative library. It completes the operations with just a click.

Key Features:
  • Supports unlimited levels of nested slides.
  • Slide overview mode when you press ESC key.
  • Optimized for mobile & touch devices.
  • Allows you to write slide content using inline or external Markdown.
  • Supports fragments in a slide.
  • Performant Fade, Slide, Convex, Concave, Zoom transitions.
  • 10+ built-in themes to fit your design.
  • You can link between slides internally.
  • Presentations can be exported to PDF.
  • Allows you to pause the presentation with B or . key.
  • Right-to-left support
  • Extensive JavaScript API
  • Auto-progression
  • Parallax backgrounds
  • Custom keyboard bindings
  • Image, iframe, videoparallax background.
Basic usage:

1. Download the package and load the necessary JavaScript and CSS files in the HTML document.

<link rel="stylesheet" href="css/reveal.css" />
<script src="js/reveal.js"></script>

2. Load a theme of your choice in the document:

<link rel="stylesheet" href="css/theme/beige.css" />
<link rel="stylesheet" href="css/theme/black.css" />
<link rel="stylesheet" href="css/theme/blood.css" />
<link rel="stylesheet" href="css/theme/league.css" />
<link rel="stylesheet" href="css/theme/moon.css" />
<link rel="stylesheet" href="css/theme/night.css" />
<link rel="stylesheet" href="css/theme/serif.css" />
<link rel="stylesheet" href="css/theme/simple.css" />
<link rel="stylesheet" href="css/theme/sky.css" />
<link rel="stylesheet" href="css/theme/solarized.css" />
<link rel="stylesheet" href="css/theme/white.css" />

3. Initialize the reveal.js and we’re ready to go.


4. Load an extersion as per your needs. All possible extensions:

  dependencies: [
    // Interpret Markdown in <section> elements
    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

    // Syntax highlight for <code> elements
    { src: 'plugin/highlight/highlight.js', async: true },

    // Zoom in and out with Alt+click
    { src: 'plugin/zoom-js/zoom.js', async: true },

    // Speaker notes
    { src: 'plugin/notes/notes.js', async: true },

    // MathJax
    { src: 'plugin/math/math.js', async: true }

5. Insert your own slides into the presentation and done.

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
      <section>Vertical Slide 2-1</section>
      <section>Vertical Slide 2-2</section>
    <section>Slide 3</section>

6. API methods.

<link rel="stylesheet" href="css/reveal.css" />
<script src="js/reveal.js"></script>

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.

Related jQuery Plugins