impress.js初体验

时间 2019-11-19

标签 impress.js impress 体验栏目 JavaScript 繁體版

原文原文链接

概述

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

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

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

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

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

　　由于在其项目网页中却没有找到说明文档&使用文档，因此这篇文章将一步一步建立一个较初级的演示文稿，咱们接着往下走。github

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

配置

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]，如

<div class="step">
    first slide
</div>

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

　　data-x = 幻灯片的x坐标浏览器

　　data-y = 幻灯片的y坐标app

　　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