在网页中展示PPT的 JS HTML 开源演示框架 reveal.js

简介

reveal.js是一个强大的开源 JS 框架，用于在网页上创建美观、可触摸、功能齐全、类似PPT（powerpoint）的HTML5演示。

这是一个让任何拥有网络浏览器的人都可以免费创建功能齐全、美观的演示文稿PPT的工具。使用reveal.js进行的演示是基于开放式web技术构建的。这意味着你可以在网上做任何事情，你可以在你的演示中做。使用CSS更改样式，使用＜iframe＞包含外部网页，或使用我们的JavaScript API添加您自己的自定义行为。该框架具有广泛的功能，包括嵌套幻灯片、Markdown支持、自动动画、PDF导出、演讲者笔记、LaTeX支持和语法突出显示的代码。

（下载的附件中附有DEMO）

主要特定：

支持无限级别的嵌套幻灯片；

按ESC键时的幻灯片概览模式；

针对移动和触摸设备进行了优化；

允许您使用内联或外部Markdown写入幻灯片内容；

支持幻灯片中的碎片；

Performant渐变、滑动、凸面、凹面和缩放过渡；

10多种内置主题，适合您的设计；

您可以在内部链接幻灯片；

演示文稿可以导出为PDF；

允许您使用B或暂停演示。钥匙；

从右到左的支撑；

扩展的JavaScript API；

自动进度；

视差背景；

自定义键盘绑定；

图像，iframe，视频，视差背景。

使用

1.  引入或安装插件

1）引入文件

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

在文档中加载您选择的主题：

<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" />

在文档中加载您选择的插件：

<!-- 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>

2）安装

# 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

2.  初始化

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

3.  您可以根据需要加载下面的一些插件：

highlight：语法高亮插件；

markdown：处理演示文稿内部markdown的解析以及外部markdown文档的加载；

math：允许在reveal.js幻灯片中呈现数学方程式，本质上是MathJax的薄包装；

notes：处理reveal.js notes窗口的打开和同步；

search：处理在幻灯片中的任何位置查找文本字符串，并通过导航到该幻灯片并突出显示来向用户显示下一次出现的内容；

zoom：将放大/缩小动画应用于幻灯片。

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

4.  HTML

将您自己的幻灯片插入演示文稿并完成。

<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>

或者使用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>

可用的HTML数据属性可自定义每张幻灯片

<!-- 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>

5.  配置

instance.initialize({

  // The "normal" size of the presentation, aspect ratio will be preserved
  // when the presentation is scaled to fit different resolutions
  width: 960,
  height: 700,

  // Factor of the display size that should remain empty around the content
  margin: 0.04,

  // Bounds for smallest/largest possible scale to apply to content
  minScale: 0.2,
  maxScale: 2.0,

  // 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,

  // Enable support for jump-to-slide navigation shortcuts
  jumpToSlide: 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 'focused', we will only capture keyboard events
  // for embedded 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).
  //
  // "<a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a>"
  // 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,

  // Flags if slides with data-visibility="hidden" should be kep visible
  showHiddenSlides: false,

  // Global override for autoplaying 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

  // Parallax background image
  parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"

  // Parallax background size
  parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"

  // Parallax background repeat
  parallaxBackgroundRepeat: '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit

  // Parallax background position
  parallaxBackgroundPosition: '', // CSS syntax, e.g. "top left"

  // Amount of pixels to move the parallax background per slide step
  parallaxBackgroundHorizontal: null,
  parallaxBackgroundVertical: null,

  // Can be used to initialize reveal.js in one of the following views:
  // - print:   Render the presentation so that it can be printed to PDF
  // - scroll:  Show the presentation as a tall scrollable page with scroll
  //            triggered animations
  view: null,

  // Adjusts the height of each slide in the scroll view.
  // - full:       Each slide is as tall as the viewport
  // - compact:    Slides are as small as possible, allowing multiple slides
  //               to be visible in parallel on tall devices
  scrollLayout: 'full',

  // Control how scroll snapping works in the scroll view.
  // - false:     No snapping, scrolling is continuous
  // - proximity:  Snap when close to a slide
  // - mandatory:  Always snap to the closest slide
  //
  // Only applies to presentations in scroll view.
  scrollSnap: 'mandatory',

  // Enables and configure the scroll view progress bar.
  // - 'auto':    Show the scrollbar while scrolling, hide while idle
  // - true:      Always show the scrollbar
  // - false:     Never show the scrollbar
  scrollProgress: 'auto',

  // Automatically activate the scroll view when we the viewport falls
  // below the given width.
  scrollActivationWidth: 435,

  // 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,

  // Should we automatically sort and set indices for fragments
  // at each sync? (See Reveal.sync)
  sortFragmentsOnSync: true,

  // Script dependencies to load
  dependencies: [],

  // Plugin objects to register and use for this presentation
  plugins: []

});

6.  API 方法

// 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 up<a href="https://www.jqueryscript.net/time-clock/">date</a> 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()

7.  事件

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 => {
  // ...
});

相关链接

官网地址 ： https://revealjs.com/

GitHub 地址 ： https://github.com/rstudio/revealjs

效果演示 ：  https://dataxujing.github.io/tensorflow-serving-Wechat/?transition=convex#/1