impress.js

作者: 紫夏离殇 | 来源:发表于2017-07-06 18:52 被阅读0次

impress.js是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架。功能:包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同时,也支持传统 PowerPoint 形式的幻灯演示。

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

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

Prezi,是一种主要通过缩放动作和快捷动作使想法更加生动有趣的演示文稿软件。它打破了传统Powerpoint的单线条时序,采用系统性与结构性一体化的方式来进行演示,以路线的呈现方式,从一个物件忽然拉到另一个物件,配合旋转等动作则更有视觉冲击力             

 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轴旋转多少度。

步骤:   

 1.html5页面结构先准备就绪    

2.创建一个id="impress"的wrapper(载体),直接div就好,其他标签同样也可以    

3.在body标签结束前引入impress.js文件并且调用  

4.class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息,降级处理的id可有可无,当有id时url中的hash变化是随着id走;反之就是step-[num]   

5.在wrapper内创建一个幻灯片只需要新建一个class="step"的即可。

例:impress.html#/step-2

想怎么玩----------------------都行-------------------

相关文章

  • impress

    what is impress.js impress.js 是一个用于展示的前端框架,基于大量 css3 的动画等...

  • 利用impress.js制作技术ppt

    impress.js介绍 impress.js是一个在现代浏览器中基于CSS3的一个展示框架的JavaScript...

  • JavaScript基础

    演示JavaScript的强大 http://impress.github.io/impress.js/http:...

  • chapter01 JavaScript介绍

    JavaScript的相关网站 http://impress.github.io/impress.js http:...

  • impress.js

    impress.js 即是一个使用 JavaScript 来做 PPT 效果网页的框架,使用起来也非常方便。 如何...

  • impress.js

    impress.js是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个...

  • impress.js 使用总结

    在美团参加 hackathon 时,使用 impress.js 做了一个商家上线流程的复盘工具。觉得 impres...

  • impress.js 舞动特效

    酷炫的动态切换 Reference API html 根元素应该包括在一个ID里面 子元素的div ID值为路由...

  • impress.js 创建演示文档

    概述 impress.js是一个基于CSS3和现代浏览器,受Prezi.com的启发而创作出来的前端多功能演示js...

  • 开胃小菜——impress.js代码详解

    README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看。...

网友评论

    本文标题:impress.js

    本文链接:https://www.haomeiwen.com/subject/jockhxtx.html