首页 » Web技术 » HTML/CSS » 正文

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

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

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

reveal-js

基本用法:

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

发表评论