欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Impress.js上手

程序员文章站 2024-01-16 12:50:40
...

前言:

  如果你已经厌倦了使用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 的浏览器也能正常运行。

演示:

  • 官网展示效果:http://bartaz.github.io/impress.js/#/overview
  • 本人制作的第一个示例:http://guyingsoft.com/gyPage/About/index.html
  •   手机暂时可能看不了,因为它是使用方向键(←/→)或Tab键切换播放的。

      从下面的下载地址即可下载Impress.js的源码,里面附带了官网的效果Demo。

      如果需要上面我做的那个例子,留言邮箱就OK了。

    准备:

    1. Impress.js的源码已经发布在了GitHub上,下载即可:https://github.com/bartaz/impress.js。
    2. 浏览器:Chrome、Safari、FireFox、IE10(有的人说不行,不知道为什么)。
    3. 代码编辑器(在这里我用的是WebStorm)。

      OK、一切准备就绪,开搞、

      大家一步一步跟着写,impress.js怎么用就会秒懂了。

    步骤一:

    1. 新建一个HTML页面,在