REVEAL.JS–基于CSS3实现的幻灯片工具

jopen 9年前

这是一个基于CSS的3D幻灯片工具。它不依赖任何外部类库,除了已经被包含在发布代码中的 highlight.js。Reveal.JS是Hakim El Hattab开发的一个演示文稿制作工具,能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。

它使用了CSS3变换功能和JavaScript,这个工具大受web开发者的青睐。支持 Fade、Slide、Convex、Concave、Zoom 等多种效果。

REVEAL.JS–基于CSS3实现的幻灯片工具

基本用法:

// HTML  <div class="reveal">    <div class="slides">      <section>Single Horizontal Slide</section>      <section>        <section>Vertical Slide 1</section>        <section>Vertical Slide 2</section>      </section>    </div>  </div>  // JS  Reveal.initialize({    dependencies: [      { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },      { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },      { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },      { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },      { src: 'plugin/zoom-js/zoom.js', async: true },      { src: 'plugin/notes/notes.js', async: true },      { src: 'plugin/math/math.js', async: true }    ]  });

官网 |   Github