reveal.js_Reveal.js –惊人HTML演示框架

演讲是传达有价值的重要信息的好方法。 无论是用于商业，教育还是营销目的，您都必须创建有趣，内容丰富且引人入胜的演示幻灯片 。 它通常是在台式机或智能手机上完成的，但您也可以使用网络技术来创建它。 在这篇文章中，我将向您介绍Reveal.js ，这是一个易于进行漂亮HTML演示的框架。

Reveal.js是创建HTML演示文稿的非常强大的框架，因为它具有许多高级功能。 使用Reveal.js，您可以创建一个演示文稿，该演示文稿支持移动手势，例如pinch和slide 。 如果您不想用代码弄脏您的手，您也可以使用markdown或可视化编辑器（如Slides）来创建演示内容 。 它甚至为您提供了一些漂亮的过渡效果和主题，并提供了许多其他功能来帮助您。

揭秘入门

在这篇文章中，我将指导您完成Reveal.js的基本实现。 让我们从下载此存储库的副本开始。 下载的文件包含以下文件夹：

• CSS ：核心风格
• js ：javascript依赖项
• 插件 ：一些组件开发为Reveal.js扩展
• lib ：所有其他第三方资产（JavaScript，CSS，字体）

现在，我们将调用所有需要包含的依赖项。 在head部分，调用主要样式以及您要使用的主题（给ID为“ theme”）。 可用的主题有： 默认 ， 天空 ， 米色 ， 简单 ， 衬线 ， 夜晚 ， 月亮和日光浴 。 对于此演示，我仅使用默认示例，如下所示：

<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">

在body标记结束之前，请包含以下javascript：

<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>

HTML标记

在本指南中，假设我们将使用一些HTML代码创建三个基本幻灯片。 用于创建演示文稿幻灯片的三个主要元素。 它们是： <div class="reveal"> ， <div class="slides">和<section> 。

在<section>标记中，您必须指定幻灯片内容。 默认幻灯片是水平移动的，如果要创建垂直幻灯片，请在其中轻松添加另一个<section> 。 这是示例：

<div class="reveal">
    <div class="slides">
        <section>This is horizontal slide</section>
        <section>
            <section>And this is vertical slide</section>
        </section>
    </div>
</div>

在第一张幻灯片中，我们将做介绍。 零碎的视图将在第二个视图中显示，最后是带有引号和内部链接的妙语幻灯片。

对于简介，我将使用h1格式化标题，并使用h3格式化子标题，如下所示：

<section>
	<h1>Hongkiat Presentation</h1>
	<h3>Hi, this is a demo for Reveal.js</h3>
</section>

现在，对于第二张幻灯片，我将使用一些单词作为片段。 要创建片段视图，您需要像创建垂直幻灯片一样将section加倍。 然后，在content元素中包括带有fragments ID和一类fragment的子section ，如下所示：

<section>
	<section id="fragments">
		<h2>I'm Fragmented</h2>
		<p>Hit the next arrow to reveal me!</p>
		<p class="fragment">I'm number one</p>
		<p class="fragment">And I'm number two</p>
		<p class="fragment">Hey don't forget me! I'm third.</p>
	</section>
</section>

最后，对于重点，我想使用流行的Eric Cantona报价。 只需用<blockquote>元素包装单词即可获得漂亮的引用样式。 要在内部链接到其他幻灯片，只需在幻灯片链接图上添加a标签。 结果如下：

<section>
	<h2>The Punchline</h2>
	<p>This is one of very popular <a href="http://en.wikipedia.org/wiki/Eric_Cantona" rel="external">Eric Cantona</a> quotes:</p>
	<blockquote>
		“When the seagulls follow the trawler, it's because they think sardines will be thrown into the sea. Thank you very much.”
	</blockquote>
	<p>Click <a href="#">here</a> to get back to the first page.</p>
</section>

一切准备就绪后，使演示文稿正常工作的最后一步是添加以下配置：

<script>
	Reveal.initialize({
		controls: true,
		progress: true,
		history: true,
		center: true,
	});
</script>

这些是我们基本实现所需的基本配置。 有关配置和其他高级设置（如减价，注释，自动滑动等）的完整列表，请参见此处 。

现在，我们为演示文稿制作了漂亮的幻灯片。 这是简介：

这是我们的碎片视图：

这是最后一张幻灯片：

结论

使用此工具，您可以在网站内创建出色HTML演示文稿。 您可以在此处找到一些启发示例。 与其他印象深刻的演示库（例如专注于其出色过渡动画的Impress.js）相比，我认为Reveal在功能方面仍然更加强大。

翻译自: https://www.hongkiat.com/blog/revealjs-html-presentation-framework/