【impress.js】告别PPT从我做起
世界Skill
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> <a href="https://github.com/dtysky" target="_blank">Github</a> 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