impress.js

介绍一下

impress.js是一个非常炫酷的幻灯片展示框架，依靠CSS3技术。

impress.js使用起来非常简单，下面就来简单介绍一下其用法。

Start

首先，当然要引入impress.js。

在div标签设置id为impress（不要求一定是div），然后在你想进行展示的地方加上calss：step，每一个step就相当于一张幻灯片。与.step同级通常会自己定义一个id，这个id主要用来在url中进行辨认序数，播放第几张的时候其id就会显示在url中，当然也可以直接用此锚点来访问指定的地方；如果没有定义，则默认为step-N（N为序数）。

fallback

如果用户的浏览器不支持这么炫酷的特效，框架会自动展示class为fallback-message中的内容，做个兼容。

一些属性

在.step的同级定义一些属性：

中心点：整个元素的中心点

data-x：距中心点x轴的坐标

data-y：距中心点y轴的坐标

data-z：相当于垂直于屏幕的距离

data-transition-duration：动画切换持续的时间，默认为1s

data-perspective：视距，默认为1000，不太了解视距的可以自行学习下

data-rotate：顺时针旋转的度数

data-rotate-x：以x轴为中心旋转，通常用来制造3D效果

data-rotate-y：以y轴为中心旋转，通常用来制造3D效果

data-rotate-z：等同于data-rotate

三种状态

impress.js提供三种状态，分别是未展示（future），展示中（present），已展示（past）

这几个状态会作为class添加在元素上，方便使用者根据自己需求进行操作

事件

impress().init()：初始化（必须）

impress().next()：过渡到下一个展示的元素

impress().prev()：过渡到前一个展示的元素

impress().goto(Index | Id | El, [duration])：过渡到指定的元素（序数 | Id | 元素，过渡时间）

Last

用法比较简单，过渡动画也比较流畅，最终效果很炫酷

作者建议在纸上构思好整个排版之后，在进行撸码哈～

如果感兴趣请看作者源码

impress.js相关推荐

Impress.js教程
Impress.js是一款基于css3转换和过渡.工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10)).并受prezi.com的理念启发的演示工具 ...
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
【华为云技术分享】【一统江湖的大前端】PPT制作库impress.js
<一统江湖的大前端>系列是笔者的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.今天要介绍的是大前端PPT制作库impress.js. ...
一统江湖的大前端(1)——PPT制作库impress.js(含附件)
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
impress.js 使用教程
Impress.js是一款基于css3转换和过渡.工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10)).并受prezi.com的理念启发的演示工具. ...
impress.js使用教程
Impress.js是一款基于 css3转换和过渡.工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10)).并受prezi.com的理念启发的演示工 ...
impress.js 中文版学习
impress.js 中文版学习从网上的中文版impress.js展示的源代码,后期会看英文的(英语太菜了,看着英文,一脸懵逼,尽量会看英文源码吧.尽量...) 研究impress官网的源码时,我 ...
超酷弦 web版PPT 基于impress.js 颠覆性在线演示应用
题记:最近看到impress.js,眼前一亮,发现超酷炫颠覆性在线演示系统,于是学者用了一下,主要是用的他的框架,然后样式上改了一下. 官方github连接 https://github.com/im ...
如何用impress.js写有逼格的ppt
概述这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板下面是一个简化的模板 ...
《转》impress.js页面PPT
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).现在普通开发者可以利用 impress.js ...