一、选择在线 PPT 的几大缘故原由

1.省去了上传下载的麻烦;

2.降落了客户端对 PPT 软件的依赖;

html5自适应幻灯片酷炫的 HTML5 网页 PPT Bootstrap
(图片来自网络侵删)

3.随时更新,更灵巧;

4.同屏播放,全场互动,增加用户体验;

二、多种选择

1.revealjs

一个可以帮我们轻易利用 HTML 创建俊秀演示文稿的框架。

2.impress

效果非常酷炫,下文将深入先容。

3.fathom.js

利用 HTML,CSS,JS 来实现滑动页面,体验非常靠近 PPT。

4.focusky

操作界面简洁,易上手。
支持 3D 幻灯片演示殊效冲破常规。

三、强力推举

上面先容了很多可用的在线 PPT 类库,在我看来最酷炫的莫过于 impress.js,我们先来看一个演示:

把稳:在 Impress 中大量利用 3D 动画,可能会使页面变得卡顿。

四、基本利用

1.定义构造

<div id=\"大众impress\"大众></div>

2.每页 PPT 利用 step 类来区分

3.利用 data-x,data-y 完成平移操作

4.缩放:data-scale

5.页面旋转:data-rotate

6.调度 z 方向层级 data-z,可以理解为离用户的远近间隔

7.利用 data-rotate-x, data-rotate-y, data-rotate-z 实现 3D 旋转

此外,还有一些可用的 css 类,js 初始化方法,以及 stepenter 事宜等,详细可以参考官方文档。

五、投屏互动

演讲者端,监听 impress:stepgoto 事宜:

不雅观众端,吸收 slide ,然后自动翻页:

须要特殊把稳,我们要禁止掉不雅观众真个操作事宜,否则你演讲过程就会被别人牵着鼻子走了~

六、可视化编辑

如果你不喜好写代码,我们可以选择可视化编辑器。

七、更多资源

10 Best JavaScript And HTML5 Presentation Frameworksimpress examples-and-demos可视化编辑器impress 导出 pdfimpress api 文档

八、热门原创文章

1.Nuxtjs 2.0 升级爬坑

2.初学算法,你该当这么玩

3.HTTP 2.0 时期,你后进了吗?