作为 Web 前端开发者，基于浏览器的幻灯演示，相比 Microsoft PPT 这种传统的幻灯片软件来说拥有很多的优势。但如果完全自己来实现，又明显非常的麻烦。那么有没有简单易用的开源组件呢？如果你以这样的目的正在寻找，impress.js 或许就是你所需要的。
impress.js 是一个基于 css3 和 javascript 开发的演示工具，基于 webkit 浏览器（Chrome、Safari）开发。通过 impress.js，你只需使用简单的 html 和 css 样式配置，即可实现各种绚丽的幻灯演示效果。
impress.js 官方推荐你阅读其 demo(http://bartaz.github.io/impress.js/) 的 HTML 代码及说明来学习如何使用，事实上这也是最快上手的方式。
下面我们基于一个示例来简单讲解其使用。
一、核心介绍(十分钟上手)
页面结构：
<!doctype html> <html> <head> <title>darren - Impress demo</title> <meta charset="utf-8" /> <link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" /> </head> <body class="impress-not-supported"> <div class="fallback-message"> <p>当前使用的浏览器版本过低.</p> 请使用最新版本的 <b>Chrome</b>, <b>Safari</b> 或 <b>Firefox</b> 浏览.</p> </div> <div id="impress"> <div class="step" data-x="0" data-y="0"> 第一张幻灯片 </div> <div class="step" data-x="500" data-y="-400"> 第二张幻灯片 </div> <div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4"> 第三张幻灯片 </div> <div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div> </div> <script src="http://bartaz.github.com/impress.js/js/impress.js"></script> <script>impress().init();</script> </body> </html>
1. 包含 fallback-message 类的容器，在浏览器不支持 impress.js 时会被显示。
2. id 为 impress 的容器是必须的，它是核心载体。
3. 包含 step 类的容器，表示一张幻灯片页面，对该容器可以进行如下属性的设置：
data-transition-duration=”2000″ 定义页面切换过渡的时间
data-x = 幻灯片的 x 坐标
data-y = 幻灯片的 y 坐标
data-z = 幻灯片的 z 坐标
data-scale = 定义缩放，data-scale为 3 则将幻灯片放大 3 倍
data-rotate = data-rotate-z 的别名
data-rotate-x = 相对x轴旋转多少度。
data-rotate-y = 相对y轴旋转多少度。
data-rotate-z = 相对z轴旋转多少度。
4. 整个 impress 就是一个以显示器中心为中心的平面，step 类容器则是参照 imress 定位的一个个矩形页面。
5. 通过对 step 进行以上属性的设置，可以在三维空间内任意排放、变换其形状。
6. 邻接的 step 页面在切换时，通过过渡效果展示出各种绚丽的风格。
理解了以上内容，是不是有点做 PPT 的感觉了呢？
接下来的事情，就是使用 HTML 和 css 任意发挥单页面内容的设计了。
二、通过 js 控制播放
impress.js 默认通过键盘方向键、空格键或回车键操作。
如果你希望它能够：自动播放、点击调到某一页，那么可以通过调用几个简单的 API 接口来实现。
impress.js 通过如下方式，提供了四个接口：
var api = impress();
`api.init()` – 初始化幻灯片，这是调用 impress.js 必须的。
`api.next()` – 切换下一页
`api.prev()` – 上一页
`api.goto( idx | id | element, [duration] )` – 跳转到某一页
参数一：可以为 页面 id，也可以为页面的 DOM 元素。
参数二：可选，定义切换过渡时间，单位毫秒(ms)。
示例：自动播放
function ImpressPlay(settings) {
var settings = settings || {
autoplay: true,
playInterval: {
start: 3000,
overview: 3000,
default: 5000
}
},
imp = impress(),
timer, playStatus;
if (settings.autoplay) {
play();
}
return {
play: play,
pause: pause
}
function play() {
loopPlay();
}
function pause() {
playstatus = false;
clearTimeout(timer);
}
function loopPlay() {
var id = window.location.hash.split("#/")[1],
time = Number(settings.playInterval[id]) || Number(settings.playInterval.default);
if (!time) {
return;
}
clearTimeout(self.timer);
playstatus = true;
self.timer = setTimeout(function () {
imp.next();
if(playstatus) {
loopPlay();
}
}, time);
}
}
var play = new ImpressPlay();
三、不足之处
1. 对CSS3 和 HTML5 特性要求高，手机等设备上的浏览器无法浏览。
2. CSS3 3D 特性对显卡要求较高，集成显卡演示 3D 效果可能会有卡顿现象。
3. 有时候我们希望页面切换完毕后执行一段脚本，显然 impress 没有提供该回调方法。那么，我们只能使用 setTimeout 方式参考 duration 过渡时间来自己实现，可以配合 hash 的变化来检测当前播放页面。
https://github.com/bartaz/impress.js/
demo: http://bartaz.github.io/impress.js/
四、相似组件推荐
1. fullPage.js
impress.js 最大的好处是简单灵活，但是想要设计的好看，并没有那么容易。
fullPage.js 是一个实现全屏滚动的工具组件，非常适合用于产品的展示。很多网站上都可以看到其绚丽的身影，其全屏滚动的效果显得格外的高端大气上档次。
fullPage 基于 jQuery 开发，快速上手非常简单，又提供了丰富的配置参数和 API 接口。详细使用可参考项目主页介绍.
项目主页：https://github.com/alvarotrigo/fullPage.js
demo: http://alvarotrigo.com/fullPage/
demo(Apple 产品): http://alvarotrigo.com/fullPage/examples/apple.html
http://www.dowebok.com/77.html
demo(网易邮箱6.0): http://mail.163.com/html/ntesmail6
demo(网易邮箱6.0_2): http://www.dowebok.com/demo/2014/97/
fullPage百度百科2013介绍：http://www.dowebok.com/demo/2014/78/
（模拟页面 http://baike.baidu.com/event/shiji/2013）
2. onepage-scroll
onepage-scroll 是一款 jQuery 单页/全屏滚动插件，小巧而功能丰富，和 fullPage 一样非常适合做产品展示。
项目主页：https://github.com/peachananr/onepage-scroll
demo: http://www.dowebok.com/demo/120/
demo: http://www.thepetedesign.com/demos/onepage_scroll_demo.html
3. Scrollify
Scrollify 是一款基于 jQuery 的全屏滚动插件。
跟 fullPage.js 相比，Scrollify 更加小巧，压缩后不足 4KB。功能上虽不如 fullPage.js 强大，对移动设备的支持也不如 fullPage.js，但对于一般的情况，Scrollify 是完全可以胜任的，它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动。
项目主页：https://github.com/lukehaas/Scrollify
demo:
http://projects.lukehaas.me/scrollify/
http://www.dowebok.com/107.html
4. reveal.js
reveal.js 是一个基于CSS的3D幻灯片工具，效果绚丽，配置参数和 API 接口丰富。比较有特色的是，它还支持 MarkDown 语法的文档编译。
项目主页：https://github.com/hakimel/reveal.js
demo:
http://lab.hakim.se/reveal-js/
http://echarts.baidu.com/doc/slide/whyEcharts.html
5. slides.js
Slide Presentation Framework 是一个简洁高效的幻灯片演示框架组件，如果说前面介绍的组件都过于复杂或要求太高，那么 slides.js 或许是你需要的。
项目主页：https://github.com/briancavalier/slides
demo: http://www.briancavalier.com/code/slides/#0
6. deck.js
Deck.js是一个用于创建幻灯片展示效果的前端工具组件。页面切换没有 impress.js 绚丽，但是上手简单，页面制作难度低，使用者众多。
项目主页：https://github.com/imakewebthings/deck.js
demo: http://imakewebthings.github.com/deck.js
相关文章:
设置博客/网站支持 Instant Pages 让 Chrome 浏览器瞬间打开下一页面
关于chrome浏览器http抓包：chrome://net-internals/
tty.js:运行于浏览器上的虚拟终端
浏览器窗口/屏幕/网页的高度、宽度大小判断与获取
puppeteer 安装时跳过 chrome 安装的方法
前端包管理工具与效率：npm、cnpm、yarn、pnpm、 tnpm 与 corepack
Chrome Developer Tools 开发者工具实用调试技巧
一次 webpack dll 无效的场景原因分析与解决
echarts 4 柱状堆叠图溢出的原因与解决办法
BrowserProxy.System' is null or not an object-错误提示
这个东西可以收藏下的说。
JS的组件代码过于庞大。。使用起来不是很方便。
前端必备，按需选择
stackedit + wordpress + reveal.js + markdown 简直就是神组合。 stackedit 使用 markdown 语法编辑切可以实时预览，可以输出 html 直接发布到 wordpress 中。stackedit markdown 原文直接可以在 reveal.js 中播放幻灯片
你的那博客怎么又回来了
一直都有的啊, 有段时间我更换服务器可能中断过