impress.js

impress.js是作者受prezi.com的启发,基于css3中的动画transforms,做成的一个表现层工具。
效果非常炫,用起来也比较简洁。
类库:http://bartaz.github.com/impress.js/js/impress.js
样式文件:http://bartaz.github.com/impress.js/css/impress-demo.css(并不是必须的,可以根据需要自己定义)

1.定义一个容器
```html

```
2.在容器中定义一个个class="step"的div,一个div就是一张幻灯片。
3.配置幻灯片的属性
用来描述幻灯片大小,切换等效果。
  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轴旋转多少度。
4.在body结束之前引入impress.js并且初始化.impress().init()

impress.js

时间: 2024-08-01 22:53:59

impress.js的相关文章

impress.js 源码解析系列(2)

1 /** 2 * [impress description] 定义 impress 函数 3 * @param {[type]} rootId [description] 4 * @return {[type]} [description] 5 */ 6 var impress = window.impress = function( rootId ) { 7 // 如果浏览器不支持,则退出 8 if ( !impressSupported ) { 9 return { 10 init: em

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

README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看impress.js并没有遇到太大的阻碍,读代码用了一个小时,写这篇文章用了近三个小时,果然写文章比读代码费劲多了. 个人感觉impress.js的代码量(算上注释一共不到1000行)和难度(没有jQuery的各种black magic= =)都非常适合新手学习,所以写一个总结,帮助大家理解源码. 考

初步理解impress.js

1.认识impress.js impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具). 现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具,但性能比基于 FLASH 的 Prezi 更优.其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等.同时,也支持传统 PowerPoint 形式的幻灯演示. 目前 impress.js 是基于 webkit 浏览器(Chrome.Safa

impress.js 一个创建在线幻灯的js库

真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 换和过渡.工作于现代浏览器(Google Chrome.Safari.Firefox 10 或 IE10).并受prezi.com的理念启发的演示工具.如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常 好的选择,用它做的PPT更加直观,效果也非常不错.在线De

Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装X,是需要付出一些代价的,不过如果你是一个前端爱好者,理解HTML/CSS,那么就没什么问题了. 看看网上的实例,动手练习练习,分分钟就能上手了. 介绍: impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(

我在 impress.js 中学到的小套路

我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下,遇到了 impress.js ,代码量只有 jQ 的十分之一,看起来挺好下手,研究了两天,勉强弄懂了其中的原理.于是写下此文,记录我在 impress.js 中学到的小套路. 附上impress.js github链接. impress.js 简介 套路开始 如何使用 JS 为某个元素添加多个样式?

impress.js初体验

概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就没问题了.当然如果你能勉强明白HTML和CSS也没问题,看看这篇文章 + 一点点实践(把官网上的例子拿来改改)即可... impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).现在普通开发者可以利用

Impress.js制作酷炫Presentation PPT

可以先看一个demo:http://dwqs.github.io/resume 昨天,我写了一些关于Impress.js的东西,对于创建在线的自我展示,这是一个非常不错的JavaScript库.由于是线上发布,所有有部分人问我怎么正确的使用它.因为没有在实际的项目页面设置帮助文档.这一篇文章将帮助你开始创建一个简单的幻灯片,但是之后你一定要完成它,可以用它来做很多酷炫的效果,唯一限制你的就是你的创造力. 需求 为了看到效果,请使用Google Chrome or Safari (or Firef

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

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