impress.js初体验

概述

　　如果你已经厌烦了使用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代码，初学者自己动手多改改感觉就好了。

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

时间： 2024-09-30 15:36:52

impress.js初体验的相关文章

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

impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等.同时,也支持传统 PowerPoint 形式的幻灯演示.目前 impress.js 是基于 webkit 浏览器(Chrome.Safari)开发,而在其它基于非 webkit 引擎,但支持 CSS3 3D 的浏览器也能正常运行.       impree

vue.js 初体验

Vue.js是什么? 一个构建数据驱动的web界面的库.他不是一个全能框架,技术上重点集中在MVVM中的ViewModel层. Vue.js特点? 轻巧.高性能.可组件化 官网地址:http://cn.vuejs.org/ Vue.js初体验 引入Vue.js独立版本, 至官网下载独立版本.根据提示,开发时选择开发版本. 直接引入Vue.js到静态页面中,从数据绑定开始编写DOM部分和js部分 <div id="app"> {{message}} </div>

Knockout.js初体验

前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个框架的设计很有意思.接下来就搞清楚什么是Knockout.js Knockout.js有4个重要的概念:(一定要牢记) 1.声明绑定:使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上. 2.UI界面自动刷新:当您的模型状态(model state)改变时,您的UI界面将自动更新. 3.依赖跟踪:为转变和联合数据,在你的模型数据之

vue.js 初体验— Chrome 插件开发实录

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个

node.js 初体验

到新公司的这段时间学到了很多新东西,有好多东西需要去总结去探索,不过事情得一件一件来,今天咱们先从Node开始.注:以后出现的Node即node.js. 先搞点前戏热热场 - 为什么写这篇文章: 1.前段时间单位有新项目启动,服务端要做的工作不多也不算麻烦,就是处理一些中间层的服务,而且我们团队里面个个都会JavaScript,领导就决定试试服务器端的JavaScript,结果本人有幸被派去研究了几天Node,怀着鸡冻的心情开始了node.js的篇章,这篇文章也就是为这几天研究的总结. 2.一个

Node.js初体验

1.Node.js是什么 [1]Node是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅. [2]Node的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码.处理高并发和异步I/O是Node受到开发人员的关注的原因之一. [3]Node本身运行Google V8 JavaScript引擎,所以速度和性能非常好,看chrome就知道,而且N

MVC + Vue.js 初体验(实现表单操作)

Vuejs http://cn.vuejs.org/ Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. DEMO效果 前端源码 @{ Lay

零基础自学前端 D3.js 初体验03 柱状图+排序

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>d3</title> </head> <script src="https://d3js.org/d3.v4.min.js"></script> <body> <button type="button"

backbone.js初体验--构建简单分页应用时踩到的坑

最近突然想接触下之前没有接触过的领域,单页应用,正巧之前也是刚刚学习了requirejs的用法,所以趁热打铁选择了很多网站采用的requirejs+underscorejs+backbonejs+jquery(zepto)的方式来进行demo的编写. 这篇文章主要不是介绍怎么去构建一个分页效果的,也不会去讲述backbone的基础知识,而是分享在我构建分页效果时候踩到的一些坑. 1. collection不是必须的 首先,我在开始写的时候就陷入了一个问题,事实证明我真的是多虑了,就是不该用col