概述
这是我学习课程impress让你的内容“舞”起来而做的总结和练手。
你可以点这里在线预览我做的ppt
注意：等加载完了之后，点击空格键翻页！
简化模板
下面是一个简化的模板
<!doctype html><html lang="zh"><head> ???<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ????<title>a mod of impress.js</title></head><body> ???<div id="impress"> ?????????<div class="fallback-message"> ???????????Your browser doesn't support impress.js. ?Try Chrome or Safari. ???????</div> ???????<div id="first" class="step" data-x="0" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-scale="0"> ???????????<p>This is my first slide. ?</p> ???????</div> ???</div></body></html>这是我简化后的模板，去除掉了一些css加载，js加载和注释的相关语句。
当然这个模板不能正常运行，但是可以很清楚的看出使用impress.js的相关语法
首先是head头部：
<head> ???<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ????<title>a mod of impress.js</title></head>按惯例添加元信息和标题，和一般的html文件一样。
然后是body部分：
???<div id="impress">先建立一个id="impress"的div，表示初始化它里面impress的相关语句；
???<div class="fallback-message"> ???????????Your browser doesn't support impress.js. ?Try Chrome or Safari. ???</div>然后是class="fallback-message"也就是回调函数的div，表示如果浏览器不支持就返回这些信息：Your browser doesn‘t support impress.js. ?Try Chrome or Safari.；
???<div id="first" class="step" data-x="0" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-scale="0"> ???????????<p>This is my first slide. ?</p> ???</div>最后是id="first" class="step"的div，表示这是一张幻灯片。
解释一下幻灯片语句里面的相关参数：
id="first"这张幻灯片的id，可以自定义，方便css文件中调。class="step"表示这是一张幻灯片，必须写step。data-x表示这张幻灯片的x轴偏移量，y，z也是同理。data-rotate表示这张幻灯片的三围旋转量，x，y，z也是同理。data-scale表示这张幻灯片的放大缩小量。
思考
其实impress.js使用起来非常简单，只要照个能用的模板，修改一下变量就会了。
我个人觉得，虽然impress.js在幻灯片的切换运动效果上非常有逼格和高大上，但是对于单张幻灯片的细枝末节却需要一点一点的写代码，非常麻烦，还不如用powerpoint。所以impress.js只适用于注重幻灯片的切换效果的场合，比如商业总结性报告，在线简历等。