github上发现了一个如此美妙的js仓库，使用起来简直简单暴力
demo
impress.js
github
impress.js
有一定html css 基础直接拿来用啊，写个xx介绍简直什么的方便到爆啊
简单谈一下他的使用，其实github上的index.html 注释里写的很详细，这里只是简单的介绍下
首先需要指定不支持impress.js的情况
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
所有demo中展示的每一步，都需要放到id="impress" 的 元素中<div id="impress">
每一步需要用class="step“ 指明他是一步<div class="step slide"
然后可以使用 *** data-x ， data-y *** 两个参数用来指定这个元素的中心在整个画布位置
比如第一步
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
</div>
处于画布 -1000，-1500的位置
其中id的值不仅用于定义css 并且将在url中 + "#/[id]"的方式表示出来，省略的话会为其制定默认idstep-N
data-scale 参数用来指定这一步的大小，data-scale="4"就是说是其他步的4倍大小，默认值是1
demo中第四步的代码
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<span class="try">then you should try</span>
<h1>impress.js<sup>*</sup></h1>
<span class="footnote"><sup>*</sup> no rhyme intended</span>
</div>
可以看出其效果
QQ截图20141116195437.png
data-rotate指定其旋转角度
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>It's a <strong>presentation tool</strong> <br/>
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
</div>
demo中看到这一步旋转了90度
而且impress.js不止于2d 3d也有很好的表现 data-z参数指定离我们多远，demo中的由大变小
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>and <b>tiny</b> ideas</p>
</div>
之后我们看到ing这一步，到了这一步之后文字发生动画
QQ截图20141116200228.png
impress提供这样的机制，所有未展示的步骤 都会被赋予类名 future，正在展示的则为present，已经展示的是past
只有某一个步骤为present
只有当当类名为present时动画才会产生
所以，结论就是你可以在每一步自由添加css动画
impress的3d效果可可以设定旋转轴
<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">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
<span class="footnote">* beat that, prezi ;)</span>
</div>
QQ截图20141116201623.png
impress提供的最基本的功能就是这样，详细看github上的源码吧
作者最后这样说道
Now you know more or less everything you need to build your first impress.js presentation, but before
you start...
Oh, you've already cloned the code from GitHub?
You have it open in text editor?
Stop right there!
That's not how you create awesome presentations. This is only a code. Implementation of the idea that
first needs to grow in your mind.
So if you want to build great presentation take a pencil and piece of paper. And turn off the computer.
Sketch, draw and write. Brainstorm your ideas on a paper. Try to build a mind-map of what you'd like
to present. It will get you closer and closer to the layout you'll build later with impress.js.
Get back to the code only when you have your presentation ready on a paper. It doesn't make sense to do
it earlier, because you'll only waste your time fighting with positioning of useless points.
If you think I'm crazy, please put your hands on a book called "Presentation Zen". It's all about
creating awesome and engaging presentations.
Think about it. 'Cause impress.js may not help you, if you have nothing interesting to say.
impress 只是提供了这样的功能，但要真正设计好一个页面，请关掉电脑，拿起笔和纸，画出你的设计
最大的限制在于人的想象
网友评论