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

少女dtysky

世界Skill

时刻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-xdata-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

如果不是自己的创作,少女是会标识出来的,所以要告诉别人是少女写的哦。