代码改变世界

impress.js初体验 - 前端装X利器

2013-01-04 08:24  聂微东  阅读(59566)  评论(58)  编辑  收藏  举报

　　博客一歇就是半年，略惭愧...元旦假期各种惬意：打打Dota(悲催的输多赢少)、滑滑雪；吃吃东西、逛逛街。转眼儿今天就得上班了，5点早早起床(最近坚持早睡早起)，忍不住分享下前段时间发现的前端工程师装X的利器，所以这新年第一篇博文诞生了:)

　　你希望别人看到你的演示文稿会发出“wow”吗？你希望使用华丽的效果来震惊你的观众吗？ 那咱们往下看

 

------------------正文分割线------------------

 

概述

　　如果你已经厌烦了使用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也能支持，背了个催。

 

配置

  1. html5页面结构先准备就绪
  2. 创建一个id="impress"的wrapper(载体)，直接div就好，其他标签同样也可以
  3. 在body标签结束前引入impress.js文件并且调用
  4. 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]，如
<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更可以让我们的演示文稿更有新意，所以简单了解下绝对是值得的，学习是最好的投资。

　　优点：

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

　　缺点：

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

　　

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

View Code 
<!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>

 

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

　　如果觉得这文章也算用心，请劳驾点右下角的推荐。

　　今天是2013.1.4，一个很amazing的日子，不知道今天会有多少人会去登记哈，表示 羡慕ing&祝福ing...我也加把劲，hoho

　　祝大家2013年快乐、顺利.