impress.js_与Impress.js和Impressr同步基于Web的演示幻灯片[Quicktip]

我已经在几所大学和学校中进行了有关Web开发和WordPress的讨论，在演讲中我遇到的一个常见问题是，靠近人群的观众几乎看不到我的幻灯片。 我对此进行了思考：如何使演示幻灯片更清晰，而演讲者和与会人员却保持同一页面？

我找到了一个解决方案，可以让观众在自己的设备上观看演示幻灯片，以及一种使设备上的幻灯片内容与我想在舞台上浏览的内容同步的方法。 这是这样做的方法。

制作幻灯片

但是，为此，我们需要使用Impress.js代替Keynote或PowerPoint创建幻灯片。

Impress.js允许您创建基于Web的演示幻灯片，并且它附带的动画效果比在Keynote或PowerPoint上可以找到的效果更令人印象深刻。 实际上，如果您是CSS3精通者，则可以创建自己的自定义动画（ 在此处尝试演示 ）。

“但是，如果我不了解CSS，JavaScript和HTML怎么办？”

然后，您可以使用Strut （基于Web的应用程序）通过GUI创建Impress.js幻灯片 。 该应用目前仍处于测试阶段，但运行良好。 您可以通过拖放来插入文本，图像或视频，类似于Keynote或PowerPoint。 您还可以更改背景，颜色，字体系列及其大小。

完成演示幻灯片的创建后，您可以单击右侧带有Impress的绿色大按钮。 然后按Command + S （在Windows中为Ctrl + S ）保存幻灯片。

同步幻灯片

现在，我们将使幻灯片同步。 使用Impress.js构建幻灯片的想法是允许在便携式计算机或移动设备上访问幻灯片。 观众也可以近距离观看，甚至可以与幻灯片互动。 当您浏览幻灯片时，对幻灯片所做的更改（例如移至下一张幻灯片）将实时反映在其设备上。

为此，您需要一个名为Impressr.jsJavaScript库。 这个图书馆是两年前出版的。 即使这样，它仍然可以正常工作，并且非常易于使用。 下载库，然后在head标签内添加以下内容。

<script src="js/jquery.signalR.js"></script>
<script src="js/jquery.signalRamp.js"></script>
<script src="js/jquery.impressR.js"></script>

然后，添加以下内容以初始化Impressr。

$("#slide-container").impressR({
	proxyName: 'presentation'
});

确保选择正确的元素立即包裹幻灯片。 只要是字符串（纯文本）， proxyName选项就可以设置为任何值。

现在，在演示文稿打开的情况下，幻灯片应在每个设备上实时同步 。 请注意，所有设备都必须连接到同一网络 。 要对其进行测试，可以在两个不同的浏览器中打开幻灯片。 在这里，作为示例，我在Chrome和Firefox中打开了幻灯片。

您也可以在移动设备上尝试。

翻译自: https://www.hongkiat.com/blog/sync-presentation-slides-impressr-js/