jQuery Plugins › jQuery Animation Plugins › reveal.js

Beautiful HTML Presentation Library - reveal.js

File Size:	2.57 MB
Views Total:	13941
Last Update:	09/12/2023 12:27:00 UTC
Publish Date:	01/10/2013 01:41:09 UTC
Official Website:	Go to website
License:	MIT

Demo Download

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, video, parallax background.

How to use it:

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

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

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

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

3. Load a plugin of your choice in the document:

<!-- Syntax highlighting -->
<script src="plugin/highlight/highlight.js"></script>

<!-- Write content using Markdown -->
<script src="plugin/markdown/markdown.js"></script>

<!-- Render math equations -->
<script src="plugin/math/math.js"></script>

<!-- Show a speaker view in a separate window -->
<script src="plugin/notes/notes.js"></script>

<!-- Press CTRL+Shift+F to search slide content -->
<script src="plugin/highlight/highlight.js"></script>

<!-- Alt+click to zoom in on elements -->
<script src="plugin/zoom/zoom.js"></script>

4. You can also install & import the reveal.js with NPM.

# Yarn
$ yarn add reveal.js

# NPM
$ npm i reveal.js --save

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
// .. more plugins here

5. Initialize the reveal.js and we're ready to go.

let instance = new Reveal({
    // ... options here ...
})
instance.initialize();

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

highlight: Synax highlighter.
markdown: Handles parsing of markdown inside of presentations as well as loading of external markdown documents.
math: Enables rendering of math equations inside of reveal.js slides. Essentially a thin wrapper for MathJax.
notes: Handles opening of and synchronization with the reveal.js notes window.
search: Handles finding a text string anywhere in the slides and showing the next occurrence to the user by navigatating to that slide and highlighting it.
zoom: Applies zoom-in/out animations to slides

// Browser
instance.initialize({
  plugins: [ RevealMarkdown ]
});

// ES Module
instance.initialize({
  plugins: [ Markdown ]
});

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

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

8. Or write your content using Markdown.

<section data-markdown>
  <textarea data-template>
    Markdown Here
  </textarea>
</section>

<section data-markdown="example.md"
         data-separator="^\n\n\n"
         data-separator-vertical="^\n\n"
         data-separator-notes="^Note:"
         data-charset="iso-8859-15">
         Or load from an external Markdown file
</section>

<section data-markdown>
  <script type="text/template">
    - Fragment 1
    - Fragment 2
    - Fragment 3
  </script>
</section>

<section data-markdown>
  <script type="text/template">
  <!-- .slide: data-background="#ff0000" -->
    Markdown Here
  </script>
</section>

9. Available HTML data attribute to customize each slide.

<!-- Custom Background Color -->
<section 
  data-background-color="black">
  ...
</section>

<!-- Custom Background Image -->
<section 
  data-background-image="1.png" 
  data-background-size="100px" 
  data-background-repeat="repeat"
  data-background-position="center"
  data-background-opacity="1">
  ...
</section>

<!-- Gradient Background -->
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
  ...
</section>

<!-- Custom Background Video -->
<section 
  data-background-video="1.mp4"
  data-background-size="cover"
  data-background-opacity="1"
  data-background-video-loop 
  data-background-video-muted>
  ...
</section>

<!-- Iframe Backgrounds -->
<section 
  data-background-iframe="https://jqueryscript.net"
  data-background-interactive>
</section>

<!-- Video Autoplay -->
<section>
  <video data-autoplay src="1.mp4"></video>
</section>

<!-- Lazy Load Media -->
<section>
  <img data-src="image.png">
  <iframe data-src="https://www.jqueryscript.net"></iframe>
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>

<!-- Lazy Load Iframes -->
<section>
  <iframe data-src="https://www.jqueryscript.net" data-preload></iframe>
</section>

<!-- Source Code -->
<section>
  <pre>
    <code data-trim data-noescape data-line-numbers="3,8-10">
      ... code here
    </code>
  </pre>
</section>

<!-- Hidden Slides -->
<section data-visibility="hidden">
  Hidden Slide
</section>

<!-- Uncounted Slides -->
<section data-visibility="uncounted">
  Uncounted Slide
</section>

<!--Transitions -->
<section 
  data-transition="zoom"
  data-transition-speed="fast">
  ...
</section>
<section 
  data-transition="fade"
  data-transition-speed="slow">
  ...
</section>
<section data-transition="slide">
  ...
</section>
<section data-transition="convex">
  ...
</section>
<section data-transition="concave">
  ...
</section>

<!-- Autoplay -->
<section data-auto-animate>
  ...
</section>

<!-- Auto Slide -->
<section data-autoslide="2000">
  ...
</section>

<!-- Prevent Swipe -->
<section>
  <p data-prevent-swipe>
    Can't change slides by swiping across this element.
  </p>
</section>

10. All default configuration options to customize your presentation.

instance.initialize({

  // Display presentation control arrows
  controls: true,

  // Help the user learn the controls by providing hints, for example by
  // bouncing the down arrow when they first encounter a vertical slide
  controlsTutorial: true,

  // Determines where controls appear, "edges" or "bottom-right"
  controlsLayout: 'bottom-right',

  // Visibility rule for backwards navigation arrows; "faded", "hidden"
  // or "visible"
  controlsBackArrows: 'faded',

  // Display a presentation progress bar
  progress: true,

  // Display the page number of the current slide
  // - true:    Show slide number
  // - false:   Hide slide number
  //
  // Can optionally be set as a string that specifies the number formatting:
  // - "h.v":   Horizontal . vertical slide number (default)
  // - "h/v":   Horizontal / vertical slide number
  // - "c":   Flattened slide number
  // - "c/t":   Flattened slide number / total slides
  //
  // Alternatively, you can provide a function that returns the slide
  // number for the current slide. The function should take in a slide
  // object and return an array with one string [slideNumber] or
  // three strings [n1,delimiter,n2]. See #formatSlideNumber().
  slideNumber: false,

  // Can be used to limit the contexts in which the slide number appears
  // - "all":      Always show the slide number
  // - "print":    Only when printing to PDF
  // - "speaker":  Only in the speaker view
  showSlideNumber: 'all',

  // Use 1 based indexing for # links to match slide number (default is zero
  // based)
  hashOneBasedIndex: false,

  // Add the current slide number to the URL hash so that reloading the
  // page/copying the URL will return you to the same slide
  hash: false,

  // Flags if we should monitor the hash and change slides accordingly
  respondToHashChanges: true,

  // Push each slide change to the browser history.  Implies `hash: true`
  history: false,

  // Enable keyboard shortcuts for navigation
  keyboard: true,

  // Optional function that blocks keyboard events when retuning false
  //
  // If you set this to 'foucsed', we will only capture keyboard events
  // for embdedded decks when they are in focus
  keyboardCondition: null,

  // Disables the default reveal.js slide layout (scaling and centering)
  // so that you can use custom CSS layout
  disableLayout: false,

  // Enable the slide overview mode
  overview: true,

  // Vertical centering of slides
  center: true,

  // Enables touch navigation on devices with touch input
  touch: true,

  // Loop the presentation
  loop: false,

  // Change the presentation direction to be RTL
  rtl: false,

  // Changes the behavior of our navigation directions.
  //
  // "default"
  // Left/right arrow keys step between horizontal slides, up/down
  // arrow keys step between vertical slides. Space key steps through
  // all slides (both horizontal and vertical).
  //
  // "linear"
  // Removes the up/down arrows. Left/right arrows step through all
  // slides (both horizontal and vertical).
  //
  // "grid"
  // When this is enabled, stepping left/right from a vertical stack
  // to an adjacent vertical stack will land you at the same vertical
  // index.
  //
  // Consider a deck with six slides ordered in two vertical stacks:
  // 1.1    2.1
  // 1.2    2.2
  // 1.3    2.3
  //
  // If you're on slide 1.3 and navigate right, you will normally move
  // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
  // from 1.3 -> 2.3.
  navigationMode: 'default',

  // Randomizes the order of slides each time the presentation loads
  shuffle: false,

  // Turns fragments on and off globally
  fragments: true,

  // Flags whether to include the current fragment in the URL,
  // so that reloading brings you to the same fragment position
  fragmentInURL: true,

  // Flags if the presentation is running in an embedded mode,
  // i.e. contained within a limited portion of the screen
  embedded: false,

  // Flags if we should show a help overlay when the question-mark
  // key is pressed
  help: true,

  // Flags if it should be possible to pause the presentation (blackout)
  pause: true,

  // Flags if speaker notes should be visible to all viewers
  showNotes: false,

  // Global override for autolaying embedded media (video/audio/iframe)
  // - null:   Media will only autoplay if data-autoplay is present
  // - true:   All media will autoplay, regardless of individual setting
  // - false:  No media will autoplay, regardless of individual setting
  autoPlayMedia: null,

  // Global override for preloading lazy-loaded iframes
  // - null:   Iframes with data-src AND data-preload will be loaded when within
  //           the viewDistance, iframes with only data-src will be loaded when visible
  // - true:   All iframes with data-src will be loaded when within the viewDistance
  // - false:  All iframes with data-src will be loaded only when visible
  preloadIframes: null,

  // Can be used to globally disable auto-animation
  autoAnimate: true,

  // Optionally provide a custom element matcher that will be
  // used to dictate which elements we can animate between.
  autoAnimateMatcher: null,

  // Default settings for our auto-animate transitions, can be
  // overridden per-slide or per-element via data arguments
  autoAnimateEasing: 'ease',
  autoAnimateDuration: 1.0,
  autoAnimateUnmatched: true,

  // CSS properties that can be auto-animated. Position & scale
  // is matched separately so there's no need to include styles
  // like top/right/bottom/left, width/height or margin.
  autoAnimateStyles: [
    'opacity',
    'color',
    'background-color',
    'padding',
    'font-size',
    'line-height',
    'letter-spacing',
    'border-width',
    'border-color',
    'border-radius',
    'outline',
    'outline-offset'
  ],

  // Controls automatic progression to the next slide
  // - 0:      Auto-sliding only happens if the data-autoslide HTML attribute
  //           is present on the current slide or fragment
  // - 1+:     All slides will progress automatically at the given interval
  // - false:  No auto-sliding, even if data-autoslide is present
  autoSlide: 0,

  // Stop auto-sliding after user input
  autoSlideStoppable: true,

  // Use this method for navigation when auto-sliding (defaults to navigateNext)
  autoSlideMethod: null,

  // Specify the average time in seconds that you think you will spend
  // presenting each slide. This is used to show a pacing timer in the
  // speaker view
  defaultTiming: null,

  // Enable slide navigation via mouse wheel
  mouseWheel: false,

  // Opens links in an iframe preview overlay
  // Add `data-preview-link` and `data-preview-link="false"` to customise each link
  // individually
  previewLinks: false,

  // Exposes the reveal.js API through window.postMessage
  postMessage: true,

  // Dispatches all reveal.js events to the parent window through postMessage
  postMessageEvents: false,

  // Focuses body when page changes visibility to ensure keyboard shortcuts work
  focusBodyOnPageVisibilityChange: true,

  // Transition style
  transition: 'slide', // none/fade/slide/convex/concave/zoom

  // Transition speed
  transitionSpeed: 'default', // default/fast/slow

  // Transition style for full page slide backgrounds
  backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

  // The maximum number of pages a single slide can expand onto when printing
  // to PDF, unlimited by default
  pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,

  // Prints each fragment on a separate slide
  pdfSeparateFragments: true,

  // Offset used to reduce the height of content within exported PDF pages.
  // This exists to account for environment differences based on how you
  // print to PDF. CLI printing options, like phantomjs and wkpdf, can end
  // on precisely the total height of the document whereas in-browser
  // printing has to end one pixel before.
  pdfPageHeightOffset: -1,

  // Number of slides away from the current that are visible
  viewDistance: 3,

  // Number of slides away from the current that are visible on mobile
  // devices. It is advisable to set this to a lower number than
  // viewDistance in order to save resources.
  mobileViewDistance: 2,

  // The display mode that will be used to show slides
  display: 'block',

  // Hide cursor if inactive
  hideInactiveCursor: true,

  // Time before the cursor is hidden (in ms)
  hideCursorTime: 5000

});

11. API methods.

// Navigate to a specific slide
Reveal.slide( indexh, indexv, indexf );

// Relative navigation
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();

// Fragment navigation
Reveal.prevFragment();
Reveal.nextFragment();

// Checks which directions we can navigate towards
// {top: false, right: true, bottom: false, left: false}
Reveal.availableRoutes();

// Call this if you add or remove slides to update controls, progress, etc
Reveal.sync();

// Call this to update the presentation scale based on available viewport
Reveal.layout();

// Randomize the order of slides
Reveal.shuffle();

// Returns the present configuration options
Reveal.getConfig();

// Fetch the current scale of the presentation
Reveal.getScale();

// Returns an object with the scaled presentationWidth & presentationHeight
Reveal.getComputedSlideSize();

// Coordinates of the slide (e.g. { h: 0, v: 0, f: 0 })
Reveal.getIndices(slide=currentSlide);  

// (0 == first slide, 1 == last slide)
Reveal.getProgress();                   

// Returns the speaker notes for the slide
Reveal.getSlideNotes(slide=currentSlide);

// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

// Returns an all horizontal/vertical slides in the deck
Reveal.getHorizontalSlides();
Reveal.getVerticalSlides();

// Total number of slides
Reveal.getTotalSlides();
Reveal.getSlidePastCount();

// Array of all slides
Reveal.getSlides();

// Checks if the presentation contains two or more
// horizontal/vertical slides
Reveal.hasHorizontalSlides();
Reveal.hasVerticalSlides();

// Checks if the deck has navigated on either axis at least once
Reveal.hasNavigatedHorizontally();
Reveal.hasNavigatedVertically();

Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isVerticalSlide();

// Shows a help overlay with keyboard shortcuts, optionally pass true/false
// to force on/off
Reveal.toggleHelp();

// Toggle presentation states, optionally pass true/false to force on/off
Reveal.toggleOverview();
Reveal.toggleAutoSlide();
Reveal.togglePause();

Reveal.isOverview();
Reveal.isAutoSliding();
Reveal.isPaused();

// Retrieve key DOM elements
Reveal.getRevealElement();
Reveal.getSlidesElement();
Reveal.getViewportElement();

// load an external URL
Reveal.initialize({ url: 'https://example.com/my-reveal-presentation' })

// Destroy
Reveal.destroy();

// Plugin API
Reveal.hasPlugin( 'markdown' )
Reveal.getPlugin( 'markdown' )
Reveal.getPlugins()

12. Events.

Reveal.on('ready', event => {
  // event.currentSlide, event.indexh, event.indexv
});

Reveal.on('slidechanged', event => {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
});

Reveal.on('slidetransitionend', event => {
  // event.currentSlide
});

Reveal.on('resize', event => {
  // event.scale, event.oldScale, event.size
});

Reveal.on('overviewshown', event => {
  // ...
});

Reveal.on('overviewhidden', event => {
  // ...
});

Reveal.on('fragmentshown', event => {
  // event.fragment
});

Reveal.on('fragmenthidden', event => {
  // event.fragment
});

Reveal.on('autoslideresumed', event => {
  // ...
});

Reveal.on('autoslidepaused', event => {
  // ...
});

Changelog:

v4.6.0 (2023-09-12)

Add support for line number offsets in Markdown code blocks.
Significantly speed up livereload
Add support for links to the id of an element nested inside slide
Adds ability to override Markdown plugin default options
Allow theme subfolders
Refactored Markdown plugin to use let/const and strict equality
Bugfixes

v4.5.0 (2023-04-13)

Add support for jump-to-slide!
Add dracula theme
Add two new high contrast themes: black-contrast and white-contrast
Add default lang attribute to index.html
It's now easier to define custom fragment styles via a new .custom class and reduced specificity.
Live reload now works with .html/.md files in subfolders

v4.4.0 (2022-10-17)

Gradient slide backgrounds
If multiple separate notes are provided for the same slide they will now all show in the speaker view
Updated browser targets from > 0.5%, IE 11, not dead to > 2%, not dead
Stop using zoom for presentation scaling. Zoom produced sharper upsizing than CSS transforms but it's a non-standard CSS property with a few too many quirks
Bug Fixes

v4.3.1 (2022-03-21)

Fix bug that prevented speaker view from working from file:// protocol
Fix console errors attempting to parse postMessage events from sources other than reveal.js
Fix issue with providing your own config for MathJax3 plugin
Fix ZIP package gulp task
Replace deprecated String.prototype.substr()

v4.3.0 (2022-02-28)

It's now possible to destroy/uninitialize a reveal.js presentation. This will remove all event listeners and roll back all changes made to the DOM. It will also unregister all plugins and destroy them if they expose a destroy method.
You can now provide an absolute URL to the presentation that should be loaded in the speaker view. This is useful if you have a presentation integrated as part of a web page but still want the speaker view to work.
Bugsfixed

v4.2.0 (2021-11-14)

The math plugin now supports three typesetting libraries: KaTeX, MathJax 2 and MathJax 3.
New event: beforeslidechange (#3003). This makes it possible to conditionally prevent navigations.
New keyboard shortcut for skipping fragments while navigating: alt + ←/↑/→/↓.
New API option for skipping fragments in directional navigation Reveal.right({ skipFragments: true }).
Adds a beforeHighlight callback to the highlight plugin
Code line numbers can now start from an offset (#3050). For example, this code block would begin its line numbering from 10: <code data-ln-start-from="10">.
Better error messaging when the .reveal or .slides containers are missing
Bugfixes

v4.1.2 (2021-06-09)

Adds support for data-auto-animate-restart and data-auto-animate-id. These properties give you finer control over which slides that should auto-animate between each other
Theme properties are now available as CSS variables, making them easy to override.
Bugfixes.

v4.1.1 (2021-05-21)

Adds support for Node.js 16.
data-background-image now accepts multiple images.
New Markdown config option animateLists — automatically turns all lists into stepped fragments.
Reduce the tab size in code blocks from 8 to 2.
More accurate calculation of which slide to jump to when clicking on the progress bar.
Optimize DOM interactions and reduce forced layouts when exporting to PDF.
Fixed: Video/audio inside of a fragment now stop playing when the fragment is hidden.
Fixed: Markdown is now split into individual slides by the default separator (---) as advertised.
Fixed: The r-fit-text layout helper now sizes text correctly in PDF exports.
Fixes an issue where some slide-specific transitions were incorrectly overridden by the global transition setting.
Fixed: The has-dark-background helper class now works when using named colors for data-background-color.

v4.1.0 (2020-10-12)

New: Add data-visibility="hidden" to a slide to hide it from view.
New: Add the r-fit-text class to make a text node grow to be as large as possible without overflowing the slide.
The configured slide width/height is now exposed as CSS variables (--slide-width/--slide-height).
The shuffle config option now shuffles vertical slides as well.
All themes now invert the text color based on the current slide background color.
Include /css and /js in npm package.
Bugfixed

v4.0.2 (2020-05-29)

Enables caching for JavaScript builds, making subsequent builds ~50% faster.
In auto-sliding presentations, the data-autoslide attribute now takes precedence over automatic detection of <video> durations.
Remove overzealous reset styles when printing to PDF.
Reveal.configure and Reveal.isReady are now available in the pre-initialized reveal.js API, to match v3.x behavior.
Switches to serving demo presentation assets from a CDN.
Bugfixes.

v4.0.1 (2020-05-25)

Fixed issues when printing speaker notes to PDF
Fixed incorrect auto-animations when there are multiple auto-animated presentations on the same page

This awesome jQuery plugin is developed by hakimel. For more Advanced Usages, please check the demo page or visit the official website.

Beautiful HTML Presentation Library - reveal.js

See Also:

Key Features:

Table Of Contents:

How to use it:

Changelog:

Beautiful HTML Presentation Library - reveal.js

See Also:

Key Features:

Table Of Contents:

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review