impress.js 用网页的方式，prize的风格做展示

github上发现了一个如此美妙的js仓库，使用起来简直简单暴力

demo
impress.js

github
impress.js

有一定html css 基础直接拿来用啊，写个xx介绍简直什么的方便到爆啊

简单谈一下他的使用，其实github上的index.html 注释里写的很详细，这里只是简单的介绍下

首先需要指定不支持impress.js的情况

    
Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
    
For the best experience please use the latest Chrome, Safari or Firefox browser.

所有demo中展示的每一步，都需要放到id="impress" 的 元素中

每一步需要用class="step“ 指明他是一步

然后可以使用 *** data-x ， data-y *** 两个参数用来指定这个元素的中心在整个画布位置

比如第一步

    

        Aren't you just bored with all those slides-based presentations?
    

处于画布 -1000，-1500的位置
其中id的值不仅用于定义css 并且将在url中 + "#/[id]"的方式表示出来，省略的话会为其制定默认idstep-N

data-scale 参数用来指定这一步的大小，data-scale="4"就是说是其他步的4倍大小，默认值是1

demo中第四步的代码

    

        then you should try
        
impress.js*
        * no rhyme intended
    

可以看出其效果

QQ截图20141116195437.png

data-rotate指定其旋转角度

    

        
It's a presentation tool 

        inspired by the idea behind prezi.com 

        and based on the power of CSS3 transforms and transitions in modern browsers.
    

demo中看到这一步旋转了90度

而且impress.js不止于2d 3d也有很好的表现 data-z参数指定离我们多远，demo中的由大变小

    

        
and tiny ideas
    

之后我们看到ing这一步，到了这一步之后文字发生动画

QQ截图20141116200228.png

impress提供这样的机制，所有未展示的步骤 都会被赋予类名 future，正在展示的则为present，已经展示的是past
只有某一个步骤为present
只有当当类名为present时动画才会产生

所以，结论就是你可以在每一步自由添加css动画

impress的3d效果可可以设定旋转轴

    

        
have you noticed it's in 3D*?
        * beat that, prezi ;)
    

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 只是提供了这样的功能，但要真正设计好一个页面，请关掉电脑，拿起笔和纸，画出你的设计

最大的限制在于人的想象