概述

　　如果你已经厌烦了使用PowerPoint制作PPT，那么impress.js是一个非常好的选择，用它做的PPT更加直观，效果也非常的不错。装X是需要一定代价的，不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白HTML和CSS也没问题，看看这篇文章 + 一点点实践（把官网上的例子拿来改改）即可...

　　impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。

　　目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。

　　impreess源码已经发布在GitHub上，地址：https://github.com/bartaz/impress.js

　　官方demo地址：http://bartaz.github.com/impress.js

　　因为在其项目网页中却没有找到说明文档&使用文档，所以这篇文章将一步一步创建一个较初级的演示文稿，我们接着往下走。

　　请准备好现代浏览器：Google Chrome(效果最佳)、Safari或FF.
　　*我的IE10不支持，不知道为什么很多资料上写着IE10也能支持，背了个催。

配置

html5页面结构先准备就绪
创建一个id="impress"的wrapper(载体)，直接div就好，其他标签同样也可以
在body标签结束前引入impress.js文件并且调用
class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息，降级处理你懂的，不多解释哈

<!doctype html>

<html>

<head>

　　<title>darren - Impress demo</title>

　　<meta charset="utf-8" />

　　<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />

</head>

<body>

    <div class="impress-not-supported">

    </div>

　　<div id="impress">

　　</div>

　　<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>

　　<script>impress().init();</script>

</body>

</html>

在wrapper内创建一个幻灯片只需要新建一个class="step"的<div>即可。<div>的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAAAfCAIAAADcCk7TAAAEz0lEQVR4nO1c25WjMAxVXRREPfRgaqAHaIEy9sSSz3ywH5bfD0wmTCYMOtnFWJJ1JV9jk+xZIEIiQkIibmohIkQygkiIhISIaByMln2NMxuylbljD9QmhOxmw3CnPwx3ojVmA/JgsZ8XkqF6+XhNpdTX15dSikgZIVJEihQRkSKlFDmt7lC62xqylbljD9ImitiNTBju9IfhTrLGbKA8WOznhWSo3HbweFgiG+7dqQF6QtggTUbOlhmyPxaVFKW+/KiU9355ahvAH/wkZcrPGiAiSolSIkopEVHyBSVKKaWns1ftKlGyGTtJNB9ticZNu2oXrbF27GhCI7elaSPqcGYIi85qPUCMGO0AJ6a2AVw1tdKsbQCNqYFM5CHlI+11ykZ51NqPh5QP050f8+H9KY/9SLsqMF+Y2gaQeF0ktVJ7A2hMDcwaQMs+Y8D8t230nNGqnN40vGWrqWvXEy8TiW5ADP15ZVhIHhAPh1ubbsWiH9L3Pyk1XrhXTK00a3ohtaQG4ziOYhyFuYpxHIXpEaMWwd3cKYQYxRj0CTGa7lGwv+BRhR5GeBFGL6KNJGy3F9jAiTrsyCJ2CW9PS20DuGpqpVnbABpTg+2W5wT+XumaU/57pXmV3KyqGJ4K48pys6pieCqMK8vNqorhqTCuLDerKobR/dQDdMP6ajy/UKYeoJ+e9y+U+MoFPMqqdegA+klfr1qUUH6OVevQcaSpzxXXFP8tsg4dWNmZ+YOsemteB+S7TGgeqyFQO6umnsdah+4ZUr0y63Roh2j3kXKMVevQfcYD6iNZZWfOPbN82S/+iazKRKpgOcQqf6y43U/uEdkNa/DEdJmyl/809cqgtZNWWtC+cWbLiFXBkxriFZYbZ+ozWEK1n52xygZKS7EB1EqRDpQFH09kjPlo1vWJ2JUXsioYKmaVvbNAGeXUe4i5GBFjIq2fXhAzfPJWVOmqLRqHSQ2ZSgXZ6btyoLQUW6UUMbkr+19pRfuY27PemYgdeeUOGGIuZhkVL8O/ALt/WEi0yVbgdoGKakvqWzZuOChG2YUeOVaFpdgAWooW7H95Upk4RczNWe9NRE00/+pbcTuroqDpDphVhbkUjqjZ58ZW3Br6qapKEdWMja5cpsxc1VkVlmIDqJfCbWaRRNtYmk+MuT3r+kQUzwprdDgpSTuruvKiPJVV+eWzs7Iy9a0tQ1vGXL3OZpW1LH6pkMWfwXwg6/pE5ITjNW2S7axKX1ieZFV5688dNUqJ1mtQR1RxylTtR1hV2/9qL3/JUa0x6/pEFOybX/8PPKvKzD7IqmhSwrswTHyIXIcuOF3kVaW9NGO8Dn2w1N2bXGmuUlbFb2pPsMpxyT6zSuUsYT6S9d5EJNK2LK0cOFele/izO+BUeJ/NYq98p1v7utecVrJfUCTvFjnbJlbFgZ7eAYuSs8thPp51eSJiyR/Ryuh/+Nflg5y/hHzv1+Xk24LXyLkTcbPqdPkOq077hexm1YfLr/yXMDerPlxuVlUMTwJwffmVrDpXbladLjerKobLMi/zsizzsszzPC+LbpsL95hO38JqWKX/Mu15NjfRiGZYE1QrZt2eF+c1B36zD9T0+hBmTiHEfFpqG8BVUyvN2gbQmBr8u+Upeft/pPGWT2Nx/gOWeqFbBwA7NAAAAABJRU5ErkJggg==" alt="" />

<div class="step">

    first slide

</div>

数据属性：用来描述幻灯片大小，切换等效果。

　　data-x = 幻灯片的x坐标

　　data-y = 幻灯片的y坐标

　　data-scale = 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍

　　data-rotate = 通过一个数字度数来确定旋转你的幻灯片

　　data-rotate-x = 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）

　　data-rotate-y = 为3D用，这个数字度数是它应该相对y轴旋转多少度。（左摆/右摆）

　　data-rotate-z = 为3D用，这个数字度数是它应该相对z轴旋转多少度。

创建

　　数据属性那段是你接下来需要重点打交道的，接下来开始step by step创建一个演示文稿。

　　从一个初始的幻灯片开始，这个幻灯片已将它data-x和data-y数据属性设置为0，所以会出现在页面的中间。

<div class="step" data-x="0" data-y="0">

    This is slide 1 - 【标题】

</div>

　　第二个幻灯片的data-x值为500、data-y值为0，活动的时候它将会向左平移(滑动)500px的地方。

<div class="step" data-x="500" data-y="-400">

    This is slide 2

</div>

　　第三张幻灯片其data-x值不变，data-y位置为-400，这将会是从顶部400px处滑入屏幕。　　

<div class="step" data-x="500" data-y="-400">

    This is slide 3

</div>

　　第四张幻灯片来个新花样，使用data-scale的值控制其缩放大小。data-scale="0.5"表示着它应该是一半的尺寸，当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸，从这一步绚丽开始起步

<div class="step" data-x="500" data-y="-800" data-scale="0.5">

    This is slide 4

</div>

　　第五张幻灯片旋转属性允许你旋转一个幻灯片到当前视图，幻灯片5被设置旋转90度，视觉效果微叼哈

<div class="step" data-x="0" data-y="-800" data-rotate="90">

    This is slide 5

</div>

　　第六张幻灯片开始3D style，可为每个维度的轴指定旋转属性(x,y,z)。x轴是横轴，意思是你可使事物倾斜(正值)或向后(负值)，y轴是竖轴，所以你可使事物向左摇摆(负值)或向右(正值)，z轴是纵轴，这将是旋转的东西向上（负值）和向下（正值）。

<div class="step" data-x="-1200" data-y="0"

    data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">

　　This is slide 6

</div>

　　以上6张幻灯片把数据属性内的值都过了一遍，一张略high的演示文稿就呈现在我们眼前。你可以以你的想象力用不可思议的和令人惊奇的方式合并这些效果来创建你自己的幻灯片展示风格。

全局预览

　　个人超赞这个视觉体验，把所有的幻灯片都平行的展示，排列的合理会非常帅气，使用方式就是在幻灯片6后面插入一段html.

<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>

　　随着你幻灯片位置的不同所以全局预览的值也会不一样，拿着结尾处的demo一点一点调整找感觉，希望你会喜欢！

　　完成后请记住它，用它做的不只局限于此，唯一的限制是你的创造力！

个人体会

　　正因为我们是前端，所以用前端技术做做各种尝试没什么不好，impress更可以让我们的演示文稿更有新意，所以简单了解下绝对是值得的，学习是最好的投资。

　　优点：

个人非常喜欢overview的功能
因为HTML+CSS都需要自己完成，位置和效果都得自己经手，视觉效果都由自己掌控
在我用过的同类产品中视觉效果最绚，CSS3+3D效果，直接给观众看晕:)

　　缺点：

impress在视觉表现上确实非常强大，比起同样做演示文稿的 html5slides 和 deck.js， impress.js的复杂度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的时间.
*如果闲impress麻烦的朋友可以去看看 html5slides 和 deck.js的资料，视觉效果会稍差一些，不过上手会简单不少。
不要把3D和旋转用得太花哨、太绚，看的人会晕，恰当就好哈

　　以下是demo代码，初学者自己动手多改改感觉就好了。

<!doctype html>

<html>

    <head>

        <title>darren - Impress demo</title>

        <meta charset="utf-8" />

        <link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />

    </head>

    <body>

        <div class="impress-not-supported">

            <div class="fallback-message">

                <p>你的浏览器<b>不支持</b> impress.js, 所以当前展示的是简化版。</p>

                <p>为了获得更好的体验，请使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 浏览器。</p>

            </div>

        </div>

        <div id="impress">

            <div class="step" data-x="0" data-y="0">

                Darren code - [标题]

            </div>

            <div class="step" data-x="500" data-y="0">

                This is slide 2

            </div>

            <div class="step" data-x="500" data-y="-400">

                This is slide 3

            </div>

            <div class="step" data-x="500" data-y="-800" data-scale="0.5">

                This is slide 4

            </div>

            <div class="step" data-x="0" data-y="-800" data-rotate="90">

                This is slide 5

            </div>

            <div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">

                This is slide 6

            </div>

            <!-- darren code -->

            <div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>

        </div>

        <script src="http://bartaz.github.com/impress.js/js/impress.js"></script>

        <script>impress().init();</script>

    </body>

</html>

<!doctype html>

<html>

    <head>

        <title>darren - Impress demo</title>

        <meta charset="utf-8" />

        <link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />

    </head>

    <body>

        <div class="impress-not-supported">

            <div class="fallback-message">

                <p>你的浏览器<b>不支持</b> impress.js, 所以当前展示的是简化版。</p>

                <p>为了获得更好的体验，请使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 浏览器。</p>

            </div>

        </div>

        <div id="impress">

            <div class="step" data-x="0" data-y="0">

                Darren code - [标题]

            </div>

            <div class="step" data-x="500" data-y="0">

                This is slide 2

            </div>

            <div class="step" data-x="500" data-y="-400">

                This is slide 3

            </div>

            <div class="step" data-x="500" data-y="-800" data-scale="0.5">

                This is slide 4

            </div>

            <div class="step" data-x="0" data-y="-800" data-rotate="90">

                This is slide 5

            </div>

            <div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">

                This is slide 6

            </div>

            <!-- darren code -->

            <div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>

        </div>

        <script src="http://bartaz.github.com/impress.js/js/impress.js"></script>

        <script>impress().init();</script>

    </body>

</html>

　　突然想起一句话作为文章总结吧：“当你有把锤子的时候,你看什么都像钉子”。

转http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html

impress.js初体验的更多相关文章

impress.js初体验——前端装X利器
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).其功能包括画布的无限旋转与缩放,任意角度放置 ...
node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
范仁义web前端介绍课程---4、html、css、js初体验
范仁义web前端介绍课程---4.html.css.js初体验一.总结一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...
Knockout.js初体验
前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...
vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
vue.js——初体验
看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...
Node.js初体验
1.Node.js是什么 [1]Node是一个server端 JavaScript 解释器,但是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了.总结:水深不深我还不知道, ...
MVC + Vue.js 初体验(实现表单操作)
Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
Laravel 5.4+Vue.js 初体验：Laravel下配置运行Vue.js
生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...

随机推荐

[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别、remove()区别
清空元素html("").innerHTML="" 与 empty()的区别一.清空元素的区别 1.错误做法一: $(" ...
synchronized的使用及注意事项
主要来源:http://blog.csdn.net/luoweifu/article/details/46613015 1.synchronized(this) void method(){ sync ...
phpcmsV9于基本介绍
1.phpcms做企业站 2.内容+管理栏目=页面显示的导航 3.文件目录结构根目录 api 接口文件目录 caches 缓存文件目录 confings 系统配置文件目录 caches_*系统缓存目 ...
基于DDD的.NET开发框架ABP实例，多租户 (Sass)应用程序，采用.NET MVC, Angularjs, EntityFramework-介绍
介绍基于ABPZERO的多租户 (Sass)应用程序,采用ASP.NET MVC, Angularjs-介绍 ASP.NET Boilerplate作为应用程序框架. ASP.NET MVC和ASP ...
[编织消息框架][设计协议]bit基础
理论部分 1字节等于8比特,也就是8个二进数,如下面公式 1Byte = 8bits = 0111 1111 1Short = 2Btye 1Int = 4Byte 那学这些有什么用呢? 可以用来做数 ...
每天一个linux命令(34)--top命令
今天给领导发邮件,我这边虽然显示发出去了,但是他那边一直没收到,结果我以为我发了,他又一直在那边等结果.所以说,以后要另外发个信息或者QQ微信之类的说一声. top命令是Linux 下常用的性能分析工 ...
第十六篇基于Bootstarp 仿京东多条件筛选插件的开发(展示上）
这几天学习Bootstrap,本来是两年前的用的东西,现在又重新拾起来,又有很多重新的认识,看了Bootstrap的样式偏多,插件现在还没有学习到几个,也有写几个插件自己用的想法.正好工作上也会用到, ...
Caffe学习系列（一）Ubuntu16.04下搭建编译Caffe环境，并运行MNIST示例（仅CPU）
前言: 正文: 1.安装必要依赖包: sudo apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-dev l ...
[POJ1028]Web Navigation(栈)
这题是01年East Central North的A题,目测是签到题 Description Standard web browsers contain features to move backwa ...
Rabbitmq集群高可用部署详细
序言清风万里的季节,周末本该和亲人朋友一起消遣这烂漫的花花草草,或是懒洋洋的晒个太阳听听风声鸟鸣.无奈工作使然,理想使然,我回到啦公司,敲起啦键盘,撸起啦代码,程序狗的世界一片黯然,一片黯然,愿天下 ...

impress.js初体验

概述

配置

创建

个人体会

impress.js初体验的更多相关文章

随机推荐

热门专题