console
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1024">
<title>3D幻灯片展示效果impress.js</title>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font-family: 'PT Sans', sans-serif;
min-height: 740px;
background: #d7d7d7;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f0f0f0), to(#bebebe));
background: -webkit-radial-gradient(#f0f0f0, #bebebe);
background: radial-gradient(#f0f0f0, #bebebe);
-webkit-font-smoothing: antialiased;
}
b, strong {
font-weight: bold;
}
i, em {
font-style: italic;
}
a {
color: inherit;
text-decoration: none;
padding: 0 .1em;
background: rgba(255, 255, 255, 0.5);
text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.9);
border-radius: .2em;
-webkit-transition: .5s;
transition: .5s;
}
a:hover {
background: rgba(255, 255, 255, 1);
text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.5);
}
body {
pointer-events: none;
}
#impress {
pointer-events: auto;
}
.step {
width: 900px;
padding: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font: 48px Microsoft YaHei;
line-height: 1.5;
}
.step {
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.step:not(.active) {
opacity: .3;
}
.hint {
position: fixed;
left: 0;
right: 0;
bottom: 200px;
background: rgba(0, 0, 0, 0.5);
color: #EEE;
text-align: center;
font-size: 50px;
padding: 20px;
z-index: 100;
opacity: 0;
-webkit-transform: translateY(400px);
transform: translateY(400px);
-webkit-transition: opacity 1s, -webkit-transform .5s 1s;
transition: opacity 1s, transform .5s 1s;
}
.impress-on-bored .hint {
opacity: 1;
-webkit-transition: opacity 1s 5s, -webkit-transform .5s;
transition: opacity 1s 5s, transform .5s;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
#title {
padding: 0;
}
#title .try {
font-size: 64px;
position: absolute;
top: -0.5em;
left: 1.5em;
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
}
#title h1 {
font-size: 190px;
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
#title .footnote {
font-size: 32px;
}
#big {
width: 600px;
text-align: center;
font-size: 60px;
line-height: 1;
}
#big b {
display: block;
font-size: 250px;
line-height: 250px;
}
#big .thoughts {
font-size: 90px;
line-height: 150px;
}
#tiny {
width: 500px;
text-align: center;
}
#ing {
width: 500px;
}
#ing b {
display: inline-block;
-webkit-transition: .5s;
transition: .5s;
}
#ing.present .positioning {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
#ing.present .rotating {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}
#ing.present .scaling {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-transition-delay: .5s;
transition-delay: .5s;
}
#imagination {
width: 600px;
}
#imagination .imagination {
font-size: 78px;
}
#source {
width: 700px;
padding-bottom: 300px;
}
#source q {
font-size: 60px;
}
#its-in-3d p {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#its-in-3d span, #its-in-3d b {
display: inline-block;
-webkit-transform: translateZ(40px);
transform: translateZ(40px);
-webkit-transition: .5s;
transition: .5s;
}
#its-in-3d .have {
-webkit-transform: translateZ(-40px);
transform: translateZ(-40px);
}
#its-in-3d .you {
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
}
#its-in-3d .noticed {
-webkit-transform: translateZ(-40px);
transform: translateZ(-40px);
}
#its-in-3d .its {
-webkit-transform: translateZ(60px);
transform: translateZ(60px);
}
#its-in-3d .in {
-webkit-transform: translateZ(-10px);
transform: translateZ(-10px);
}
#its-in-3d .footnote {
font-size: 32px;
-webkit-transform: translateZ(-10px);
transform: translateZ(-10px);
}
#its-in-3d.present span, #its-in-3d.present b {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
#overview {
z-index: -1;
padding: 0;
}
.impress-on-overview .step {
opacity: 1;
cursor: pointer;
}
.slide {
display: block;
width: 900px;
height: 700px;
padding: 40px 60px;
border-radius: 10px;
background-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .3);
font-family: '微软雅黑', '黑体', 'Open Sans', Arial, sans-serif;
color: #666;
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-size: 30px;
line-height: 36px;
letter-spacing: -1px;
}
.slide q {
display: block;
font-size: 50px;
line-height: 72px;
margin-top: 100px;
}
.slide q strong {
white-space: nowrap;
}
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
display: none;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border-radius: 10px;
border: 1px solid #e4c652;
background: #eedc94;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-disabled .step,
.impress-not-supported .step {
position: relative;
opacity: 1;
margin: 20px auto;
}
.impress-not-supported .fallback-message {
display: block;
}
.toptit {
width: 100%;
text-align: center;
font: 12px Microsoft YaHei;
color: #333;
position: fixed;
top: 5px;
left: 0;
z-index: 9102;
}
</style>
</head>
<body>
<div class="toptit">键盘左右键翻页</div>
<div id="impress">
<!--
接下来就要发生一些有趣的事情了。
所有在`#impress`中并且有`step`类名的元素都是一个场景。这些个场景会被impress.js定位、
旋转和缩放，我们的‘镜头’会一一的展示它们。
位置信息也是通过data属性设置的。
在下面这个场景里，我们给它设置了`data-x="-1000"`和`data-y="-1500`的属性。
这意味着这个元素的**中心**（是的，确实是中心）在整个幻灯片的(-1000px, -1500px)处。
这个场景没有旋转和缩放。
-->
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>你是不是觉得传统的幻灯片都 <b>弱爆了</b> ？</q>
</div>
<!--
`id`属性仅仅是用来表示场景的URL的，事实上也不是必须的东西。
即使你没有给它定义，你依然可以使用`step-N`来找到这一幕。
比如说下面这个场景就可以叫做`step-2`。
这个URL的锚部分就应该是`#/step-2`。
你也可以在一个链接里使用`#step-2`，这可以直接定位到这个场景。
请注意，`#/step-2`虽然在链接中也可以使用，但是并不是推荐的，使用`#step-2`可以在
更广泛的情况是使用（比如impress.js压根儿没起作用的时候）。
-->
<div class="step slide" data-x="0" data-y="-1500">
<q>你有没有想过，在 <strong>现代浏览器</strong> 光辉下，我们可以不再受限于 <strong>老旧浏览器的残忍压迫</strong> ？</q>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q>你难道不想使用 <strong>华丽的舞台效果</strong> 来 <strong>震惊你的观众</strong> 吗？</q>
</div>
<!--
这是一个缩放的效果。
同样的，我们又使用了`data-`属性，这一次我们写了一个`data-scale="4"`，这样一来，
这个元素就会被放大成原来的4倍。
如果从这个场景退出，它会被还原原来的大小（缩小4倍）。
-->
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<span class="try">那么，您应该尝试一下</span>
<h1>impress.js<sup>*</sup></h1>
<span class="footnote"><sup>*</sup>美式的小幽默，无视</span>
</div>
<!--
这个场景使用了旋转。
写法你一定猜到了，我们使用了`data-rotate="90"`属性，这就意味着这这个场景会被
顺时针旋转90度。
-->
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>它是一个 <strong>演示工具</strong> <br/>
受<a href="http://prezi.com" target="_blank">prezi.com</a>启发 <br/>
基于现代浏览器中 <strong>强大的CSS3特效</strong> 开发而成</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>它可以具象化您 <big style="font-size:larger">伟大</big> </p>
</div>
<!--
现在事情变得更欢乐了，我们开始进入三维的世界！
除了`data-x`和`data-y`以外，我们还可以定义第三个坐标，就是`data-z`。
我们在下一个例子上加上了`data-z="-3000"`，意味着这个场景离我们有3000px那么远。
-->
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>或者 <span style="font-size:smaller">细致</span> 的 <span class="thoughts">想法</span></p>
</div>
<!--
下面这个场景并没有展示新的data属性，但是你应该可以看到这里面有些字是动的。
这些是非常基础的CSS transition动画，当这个场景开始后，我们就让它们开始播放。
在演示刚开始的时候，所有的step元素都有一个`future`类，也就是说它们还没有开始上演。
当舞台进入某个场景，这个场景被贴上了`present`的类标签，这就是动画的秘密——
字符在`present`类里面发生动画。
当场景完毕，`present`类就被移除了，写上一个`past`的类。
简而言之，每个场景都会具有`future`、`present`、`past`中某一个的类，只有当前
播放的step元素具有`present`类属性。
-->
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p>它在一个无线大的画布上，展示了 <b class="positioning">定位</b> , <b class="rotating">旋转</b> 和 <b class="scaling">缩放</b> 的特效</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p><b class="imagination">心</b>有多大，<b>舞台</b>就有多大</p>
</div>
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>想知道更多吗？</p>
<q><a href="http://github.com/bartaz/impress.js" target="_blank">查看源码吧</a>, 兄台!</q>
<img src="http://ww1.sinaimg.cn/mw690/bea70753gw1f17x3bynp6j21hc0u0n6l.jpg" alt="">
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>哦，还有一件事情……</p>
</div>
<!--
最后我们演示一下impress.js强大的灵活性。
你不仅仅可以再3D空间中定位一个物体，同样的也能在3D中旋转一个物体！
所以我们这里沿着X轴旋转-40度（逆时针旋转40度），沿着Y轴旋转10度（顺时针）。
当然你也可以沿着z轴旋转`data-rotate-z`——我想你猜到了，这和`data-rotate`是一个效果。
-->
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="have">你</span> <span class="you">有没有</span> <span class="noticed">注意到</span> <span class="its">它</span> <span class="in">是</span> <b>3D<sup>*</sup></b>的？</p>
<span class="footnote">* prezi可没这能力</span>
</div>
<!--
我们最后来整理一下所有的属性：
* `data-x`, `data-y`, `data-z` —— 它们定义了元素中心在画布的位置，默认是0；
* `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` —— 它们定义了元素
沿着指定轴旋转的角度，默认是0；`data-rotate` 和 `data-rotate-z`是一回事；
* `data-scale` —— 定义了元素缩放的比率，默认是1；
这些值会被impress.js读取并写入CSS的transformation变化，你可以在下面网址查看更多信息：
https://developer.mozilla.org/en/CSS/transform
-->
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
<!--
Hint其实和impress.js没有半点关系。
不过它演示一种创造性的使用impress.js的方法。
当某一个场景显示的时候，它会获得`active`类属性（译注：确实，除了上面的present以外还有一个active），
同时body元素会有一个`impress-on-ID`（ID就是当前显示的场景的id）的类...
听起来很让人迷惑，举个栗子，当我们的第一张幻灯片显示的时候，它的id是`bored`，那么我们的body
就有一个叫做`impress-on-bored`的类名。
我们就是用这个类来显示下面的Hint，查看一下CSS文件，我们延时的显示了操作方法。
...
当然这里面还有一些JavaScript的代码…… 孩子，千万不要再家里模仿这样的做法：）
我们只是为了演示对应触摸设备的提示而随便写写的，你应该把这代码写到一个独立的JS文件里，
而且这个演示也应该放在HTML里的某个地方，而不是写死在代码里。
不过我只是随口说所;)
-->
<div class="hint">
<p>使用空格或者方向键来移动</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector('.hint').innerHTML = "<p>向左或向右拖动屏幕来移动</p>";
}
</script>
<!--
最后，但远远不是结束。
为了让上述的动作顺利进行，我们必须在页面里包含impress.js这个文件。
建议你使用一个压缩过的文件。
我这里包含了一个未压缩的版本，这样可以增加可读性（译注：我用了压缩过的，为了节省流量……）
你同时还需要使用`impress().init()`函数来初始化impress.js，你应该在最后调用这个函数。
并不仅仅因为这是个好习惯，而且这样会保证当页面加载完成后执行。
当然你可以使用“DOM ready”事件，但是我比较懒;)
-->
<script src="http://cdn.bootcss.com/impress.js/0.5.3/impress.min.js"></script>
<script>impress().init();</script>
<!--
`impress()` 函数给了你一个控制演示API的方法。
把结果放在一个变量里：
var api = impress();
这样你就可以使用几个可以使用的方法：
`api.init()` - 初始化演示；
`api.next()` - 播放下一个幻灯片；
`api.prev()` - 回到上一个幻灯片；
`api.goto( idx | id | element, [duration] )` - 通过知道那个id或者DOM播放指定的幻灯片
可以指定转换时间（单位毫秒），当然时间可以是缺省的。
你可以随时再次调用`impress()`来再一次获得这个API，类似`impress().next()`当然也是可以的。
不用担心，这不会再一次的初始化impress。
-->
</body>
</html>
<!--
OK，现在你或多或少的了解impress.js了，但是在你开始之前……
你从GitHub上复制了代码（译注：或者你从我博客上复制了代码)？
你已经在编辑器里打开了它？
这不是你创造你的演示的正确方法，这只是个代码，你的想法才是好的演示的根本。
所以，如果你想做个好演示，取来一张纸一支笔，然后关了你的电脑。
描、绘、写，现在纸上进行一场头脑风暴，试着做一个思维导图，这个才能帮助你怎样更好的
创建impress.js的作品。
当你在纸上完成了工程，再回到impress.js吧，一开始就用它毫无意义，只是浪费时间而已。
如果你觉得我在胡扯，去看看一本叫做"Presentation Zen"（中译《演说之禅》，貌似还没有中文版）
的书吧，这本书能给你更多更好的创建演示的方法和知识。
请虚心接受我的意见，“因为你都不知道该说些什么，impress.js更加不知道”。
-->