`
zhb8015
  • 浏览: 395868 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
Group-logo
Spring Roo杂谈
浏览量:0
社区版块
存档分类
最新评论

impress入门 (ppt)(转)

    博客分类:
  • INFO
阅读更多

     原文地址:http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html

 

        如果你已经厌烦了使用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>




 
分享到:
评论

相关推荐

    超强的制作PPT的impress.js

    **标题解析:** "超强的制作PPT的impress.js" impress.js 是一个基于HTML5和CSS3的开源工具,用于创建具有视觉冲击力的、具有深度和维度感的演示文稿。它模仿了微软PowerPoint的功能,但提供了一个全网页版的解决...

    Impress 演示文稿基础教程

    Impress是LibreOffice和Apache OpenOffice套件中的一个组件,专门用于创建专业级别的演示文稿。本教程将深入讲解如何使用Impress来制作出引人入胜的幻灯片,帮助你提升在商务会议、学术报告或教学活动中的表现力。 ...

    清华Linux从入门精通PPT

    【清华大学Linux从入门到精通PPT】是一套全面讲解Linux操作系统的教程,涵盖了从系统安装、基础配置到高级应用的各个层面。以下是根据压缩包中包含的文件名称,解析出的相关知识点: 1. **第2章 Linux安装.ppt**: ...

    impress.js 神器

    **impress.js 神器** impress.js 是一个基于 HTML5 和 CSS3 的演示文稿框架,由 Bartek Szopka 创建。这个神器利用了现代浏览器对 3D 转换的支持,使得创建富有视觉冲击力和交互性的演示变得轻而易举。impress.js ...

    动态数字时钟PPT

    7. **文件格式**:文件名为“动态数字时钟PPT模板免费下载.ppt”,表明这是一个PowerPoint的原始文件,使用Microsoft PowerPoint或者兼容的软件(如LibreOffice Impress或Google Slides)即可打开和编辑。...

    impress.js幻灯片sql分享

    **impress.js幻灯片SQL分享** impress.js是一款基于HTML5和CSS3的开源库,用于创建具有视觉冲击力的、多维度的幻灯片展示。它利用浏览器的3D变换功能,使得幻灯片可以跳出传统的二维平铺模式,实现类似全息投影的...

    用impress.js做的关于bitcoin演示稿ppt动画效果下载

    【标题】"用impress.js做的关于bitcoin演示稿ppt动画效果下载" 提示我们这个压缩包内包含一个使用impress.js技术制作的比特币(Bitcoin)主题的演示文稿,其中运用了丰富的动画效果来增强讲解的生动性。impress.js是...

    impress.js源码及Demo

    Impress.js是一款基于css3转 换和过渡、工作于现代浏览器(Google Chrome或Safari (或 Firefox...如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常 好的选择,用它做的PPT更加直观,效果也非常的不错。

    ppt模板 ppt模板 ppt模板 ppt模板

    8. PPT模板的设计工具:PPT模板的设计工具包括Microsoft PowerPoint、Google Slides、LibreOffice Impress等。设计者应根据不同的应用场景和设计需求选择合适的设计工具。 9. PPT模板的分享与协作:PPT模板的分享与...

    impress.js

    Impress.js 是国外一位开发者受 Prezi启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架。而 Prezi 是一个颠覆性的在线演示工具,此前我们也曾有过介绍,并得到很多读者的积极反馈。现在普通...

    impress.js-master.zip

    impress.js 是一个基于 JavaScript 的开源项目,用于创建极具视觉冲击力的演示文稿。它由 Bartek Szopka 创建,灵感来源于 HTML5 和 CSS3 的强大功能,旨在让网页演示变得如同 Prezi 一样流畅而富有动态感,但又不失...

    颁奖盛典PPT模板.pptx

    * 其他PPT设计工具还有GoogleSlides、LibreOffice Impress、Haiku Deck等,每种工具都有其特点和优势。 * PPT模板设计工具通常提供了预设的模板和设计元素,如字体、颜色、图片等,以帮助用户快速设计PPT模板。 五...

    impress框架

    它主要是基于CSS3的变换和切换。只有现代浏览器支持,效果很震撼。

    前端项目-impress.js.zip

    **impress.js:创新的前端演示框架** impress.js是一个基于CSS3的开源演示框架,专为现代浏览器设计,旨在提供类似Prezi的交互式演示体验。Prezi是一款在线演示工具,以其独特的非线性、平移和缩放效果而闻名。而...

    ppt保存成PDF

    总的来说,PPT转PDF是一种常见的文件格式转换需求,通过PowerPoint自带功能或其他第三方工具,都可以轻松实现。在转换过程中,注意保持文件的质量和完整性,同时根据实际需求选择最适合自己的转换方式。

    PPT镜像软件.zip

    6. **兼容性**:考虑到PPT镜像软件是作为一个独立的压缩包存在,它可能支持多种版本的PowerPoint,包括Microsoft Office套件的版本和开源的LibreOffice Impress等。 7. **教程与资源**:为了更好地利用这些工具,...

    PPT文本转换器(ppt to txt)

    - 搜索引擎优化:将PPT内容转成TXT,便于搜索引擎抓取,提高内容的可搜索性。 3. 使用步骤: - 安装和启动:首先下载并安装PPT文本转换器软件,然后启动程序。 - 导入PPT文件:点击“添加文件”或“添加目录”,...

    大圆套小圆多项包含PPT图表.pptx

    6. PPT图表的应用软件:PPT图表的应用软件非常广泛,如Microsoft PowerPoint、Google Slides、LibreOffice Impress等。这些软件提供了强大的PPT图表设计和编辑功能,可以满足不同的需求和需求。 7. PPT图表的设计...

    精美ppt模板;动态动画共30多个精美ppt模板和动态的动画

    4. **51ppt系列**:“51ppt_016.ppt”、“51ppt_043.ppt”、“51ppt_044.ppt”等文件名中,“51ppt”通常代表一个网站或资源平台,这些文件可能是从该平台上获取的模板,用户可以从中学习和借鉴设计思路。...

    适合活动抽奖现场的炫酷动画ppt模板.rar

    在实际使用这个rar压缩包时,你需要先解压文件,找到51pptmoban.com内的PPT模板文件,然后使用Microsoft PowerPoint或者兼容的软件(如Google Slides、LibreOffice Impress)打开编辑。根据活动需求,你可以替换文字...

Global site tag (gtag.js) - Google Analytics