【impress.js】告别PPT从我做起

时刻2015.05.05

路标

impress.js是一个牛逼的js库，它为我们开创了演示界面的新纪元，相比其他同样牛逼的类似的js库，它做到了真正的简单易用却效果强大，其提供的接口十分简洁易懂，同时却不失复杂的变化性，结合CSS能够达到你想达到的几乎任何效果，当然有些太复杂的做起来还不如直接用PPT但是，很多时候那些复杂的东西有必要吗？看需求吧www反正我觉得没有必要。

1.获取和示例

在这里直接获取源代码，一个js文件，下下来即可
impress.js

官方示例
Demo by bartaz

我的示例
这个是纯粹为支持impress.js的终端做的，不支持的情况下采用抛出信息的处理方式。
Publihed Projects
这个为不支持的终端做了一下处理，其实也就是不同的CSS。
FPGA-Imaging-Library

2.使用

首先需要有一定的Html和CSS基础，这个很简单，自行了解即可，因为严格意义上这两个不算编程（基本不涉及逻辑），并且同时，impress.js的使用基本也不涉及逻辑。

1.链接

这一点首先单独列出来是为了澄清一些东西，一般情况下，我们会在head块内加入一些metadata，并链接js和CSS文件，但对于impress.js不能这么做，所以不要在header块内引用它，具体在哪里会在下面说明。

2.作用域

作用域，也就是impress.js发生作用的区块，根据它的设计，你需要建立一个id为impress的div，并将你需要作为impress.js演示对象的内容放到其中：

<div id="impress">

</div>

在这个div中，一般而言我们需要加入一个class为no-support-message的div，这个div中的内容会在终端不支持impress.js的时候显示出来，比如：

<div class="no-support-message">
    Your browser doesn't support impress.js.It can't phones.<br>
    你的浏览器不支持impress.js.请更换，它不支持手机。
</div>

当然位置和样式是由你自己决定的，比如在我的第一个实例中我这样定义：

.no-support-message { 
display:none; 
width:940px; 
margin:0 auto 24px auto; 
text-align:center;
}

效果就是当不支持的时候，这段内容就会显示在页面开头的中间部分。
对于第二个示例，由于我采用的是其他解决方案，所以没有这段内容。

3.设计

确定作用域后便可以开始设计，在上面的作用域中加入若干你需要演示的div，每个div都是一个演示页面，它们必须都拥有step这个class，没有这个class的div会当做一般元素处理，也就是不受impress控制。
第一个例子的首页：

<div id="first-page" class="step" data-x="0" data-y="0">
    <h1 id="first-title">Published Projects</h1>
    <p id="first-desc">My published projects are here.</p>
    <p id="first-link"><a href="http://dtysky.moe" target="_blank">Blog</a>&nbsp;&nbsp;<a href="https://github.com/dtysky" target="_blank">Github</a>&nbsp;&nbsp;dtysky@outlook.com</p>
    <p id="page-top">Click a page you want to view, you can also press "←", "→" or whitespace.
    <br>点击你想进入的页面或者按下 "←"、"→"或空格键.</p>
</div>

为了显示这些演示页面，必须要为step定义样式，第一个示例中定义的样式如下：

.no-support-message { 
display:none; 
width:940px; 
margin:0 auto 24px auto; 
text-align:center;
}

每一个页面宽度为940px，位置是浏览器页面正中，所有文字居中。
你应该注意到了，和一般的属性不同，这个首页的div中拥有data-x和data-y两个属性，而这种属性就是impress.js效果的依赖源。
这些属性定义了每一个页面的位置信息，这个位置是相对于你的浏览器主页面而言的，主页面的中心位置被定义为原点，所有的属性如下：

data-x: 距离原点的横向偏移量，像素值
data-y: 距离纵向的纵向偏移量，像素值
data-rotate-x: 相对当页中心点的x轴旋转偏移量，角度
data-rotate-y: 相对当页中心点的y轴旋转偏移量，角度
data-rotate-z: 相对当页中心点的z轴旋转偏移量，角度
data-scale: 相对于主体页面的比例，比例值

有了这些属性，我们便可以开始设计了，具体的设计就是在上面这些块中加入属性值，这里说的已经足够清晰，自己尝试一下就可以了。

4.工作

完成了页面设计之后便可以开始开始演示了，在这之前，我们需要链接impress.js并启动它，在你的impress块后加入两行代码即可：

<div id="impress">
    ......
</div>
<script type="text/javascript" src="js/impress.js"></script>
<script>impress().init();</script>

5.其他技巧

不知道是否只有我有这个需求，就像第一个示例一样，将演示页面分类，一块一块展示，展示完一块可以选择直接返回主页面，这个需求可以直接通过以下方式实现：

观察启动后的标题栏，我们可以知道每一个页面的url是这么表示的：

(主页面url)/#/演示页面id

比如对于第一个实例的首页，url是：

http://proj.dtysky.moe/#/first-page

所以可以在某个演示页面中插入一个超链接：

<div class="step">
    ......
    <div class="return-first"><a href="#/first-page"><b>Return / 返回页首</b></a></div>
</div>

class为return-first的块中有一个链接，这个链接指向了首页。

3.示例代码

这里提供一个简洁版本的模板，除了主要内容之外一切皆无：
将三个文件放入一个文件夹即可。

html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="impress">
    <div class="no-support-message">
        Your browser doesn't support impress.js.It can't phones.<br>
        你的浏览器不支持impress.js.请更换，它不支持手机。
    </div>
    <div id="first-page" class="step" data-x="0" data-y="0">
        <h1>首页</h1>
        <br>点击你想进入的页面或者按下 "←"、"→"或空格键.</p>
    </div>
    <div class="step" data-x="-700" data-y="-200" data-scale="0.6" data-rotate-z="-45">
        <h1>第一块-第一页</h1>
    </div>
    <div class="step" data-x="-1100" data-y="100" data-scale="0.4" data-rotate-z="-135">
        <h1>第一块-第二页</h1>
    </div>
    <div class="step" data-x="-1300" data-y="-100" data-scale="0.2" data-rotate-z="-45">
        <h1>第一块-第三页</h1>
        <div class="return-first"><a href="#/first-page"><b>Return / 返回页首</b></a></div>
    </div>
    <div class="step" data-x="800" data-y="-300" data-scale="0.6" data-rotate-z="45">
        <h1>第二块-第一页</h1>
    </div>
    <div class="step" data-x="1150" data-y="50" data-scale="0.4" data-rotate-z="135">
        <h1>第二块-第二页</h1>
    </div>
    <div class="step" data-x="1400" data-y="-200" data-scale="0.2" data-rotate-z="45">
        <h1>第二块-第三页</h1>
        <div class="return-first"><a href="#/first-page"><b>Return / 返回页首</b></a></div>
    </div>
</div>
<script type="text/javascript" src="impress.js"></script>
<script>impress().init();</script>
</body>
</html>

css

h1,h2,h3,h4,h5,h6,a,p{
font-family: "Microsoft YaHei" ! important;
}
body{
    margin: 0px;
}
.return-first{
    margin-top: 50px;
}
.return-first a{
    font-size: 20px;
    text-decoration: none;
    color: #000000;
}
.return-first a:hover{
    font-size: 21px;
    color: #006688;
}
.step { 
    width:940px; 
    margin:0 auto 24px auto; 
    text-align:center; 
}
.no-support-message { 
    display:none; 
    width:940px; 
    margin:0 auto 24px auto; 
    text-align:center;
}

js

自备impress.js

点击查看评论