基于浏览器的幻灯演示工具组件:impress.js 快速上手及相似组件推荐

目录
[隐藏]

作为 Web 前端开发者,基于浏览器的幻灯演示,相比 Microsoft PPT 这种传统的幻灯片软件来说拥有很多的优势。但如果完全自己来实现,又明显非常的麻烦。那么有没有简单易用的开源组件呢?如果你以这样的目的正在寻找,impress.js 或许就是你所需要的。

impress.js 是一个基于 css3 和 javascript 开发的演示工具,基于 webkit 浏览器(Chrome、Safari)开发。通过 impress.js,你只需使用简单的 html 和 css 样式配置,即可实现各种绚丽的幻灯演示效果。

impress.js 官方推荐你阅读其 demo(http://bartaz.github.io/impress.js/) 的 HTML 代码及说明来学习如何使用,事实上这也是最快上手的方式。

下面我们基于一个示例来简单讲解其使用。

一、核心介绍(十分钟上手)

页面结构:

<!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 class="impress-not-supported">
	<div class="fallback-message">
	    <p>当前使用的浏览器版本过低.</p>
	    请使用最新版本的 <b>Chrome</b>, <b>Safari</b> 或 <b>Firefox</b> 浏览.</p>
	</div>
  <div id="impress">
		<div class="step" data-x="0" data-y="0">
		    第一张幻灯片
		</div>
		<div class="step" data-x="500" data-y="-400">
		    第二张幻灯片
		</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">
			第三张幻灯片
		</div>
		<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>

1. 包含 fallback-message 类的容器,在浏览器不支持 impress.js 时会被显示。

2. id 为 impress 的容器是必须的,它是核心载体。
3. 包含 step 类的容器,表示一张幻灯片页面,对该容器可以进行如下属性的设置:

  data-transition-duration=”2000″ 定义页面切换过渡的时间
data-x = 幻灯片的 x 坐标
data-y = 幻灯片的 y 坐标
data-z = 幻灯片的 z 坐标
data-scale = 定义缩放,data-scale为 3 则将幻灯片放大 3 倍
data-rotate = data-rotate-z 的别名
data-rotate-x = 相对x轴旋转多少度。
data-rotate-y = 相对y轴旋转多少度。
data-rotate-z = 相对z轴旋转多少度。

4. 整个 impress 就是一个以显示器中心为中心的平面,step 类容器则是参照 imress 定位的一个个矩形页面。
5. 通过对 step 进行以上属性的设置,可以在三维空间内任意排放、变换其形状。
6. 邻接的 step 页面在切换时,通过过渡效果展示出各种绚丽的风格。

理解了以上内容,是不是有点做 PPT 的感觉了呢?
接下来的事情,就是使用 HTML 和 css 任意发挥单页面内容的设计了。

二、通过 js 控制播放

impress.js 默认通过键盘方向键、空格键或回车键操作。
如果你希望它能够:自动播放、点击调到某一页,那么可以通过调用几个简单的 API 接口来实现。
impress.js 通过如下方式,提供了四个接口:

var api = impress();

`api.init()` – 初始化幻灯片,这是调用 impress.js 必须的。
`api.next()` – 切换下一页
`api.prev()` – 上一页
`api.goto( idx | id | element, [duration] )` – 跳转到某一页
参数一:可以为 页面 id,也可以为页面的 DOM 元素。
参数二:可选,定义切换过渡时间,单位毫秒(ms)。

示例:自动播放

function ImpressPlay(settings) {
	var settings = settings || {
		autoplay: true,
		playInterval: { 
			start: 3000,
			overview: 3000,
			default: 5000
		}
	}, 
	imp = impress(),
	timer, playStatus;

	if (settings.autoplay) {
		play();
	}
	return {
		play: play,
		pause: pause
	}

	function play() {
		loopPlay();
	}

	function pause() {
		playstatus = false;
		clearTimeout(timer);
	}
	function loopPlay() {
		var id = window.location.hash.split("#/")[1],
			time = Number(settings.playInterval[id]) || Number(settings.playInterval.default);

		if (!time) {
			return;
		}
		
		clearTimeout(self.timer);
		playstatus = true;
		self.timer = setTimeout(function () {
			imp.next();
			if(playstatus) {
				loopPlay();
			}
		}, time);
	}
}

var play = new ImpressPlay();

 三、不足之处

1. 对CSS3 和 HTML5 特性要求高,手机等设备上的浏览器无法浏览。
2. CSS3 3D 特性对显卡要求较高,集成显卡演示 3D 效果可能会有卡顿现象。
3. 有时候我们希望页面切换完毕后执行一段脚本,显然 impress 没有提供该回调方法。那么,我们只能使用 setTimeout 方式参考 duration 过渡时间来自己实现,可以配合 hash 的变化来检测当前播放页面。

https://github.com/bartaz/impress.js/
demo: http://bartaz.github.io/impress.js/

四、相似组件推荐

1. fullPage.js

impress.js 最大的好处是简单灵活,但是想要设计的好看,并没有那么容易。
fullPage.js 是一个实现全屏滚动的工具组件,非常适合用于产品的展示。很多网站上都可以看到其绚丽的身影,其全屏滚动的效果显得格外的高端大气上档次。

fullPage 基于 jQuery 开发,快速上手非常简单,又提供了丰富的配置参数和 API 接口。详细使用可参考项目主页介绍.

项目主页:https://github.com/alvarotrigo/fullPage.js
demo: http://alvarotrigo.com/fullPage/
demo(Apple 产品): http://alvarotrigo.com/fullPage/examples/apple.html
http://www.dowebok.com/77.html
demo(网易邮箱6.0): http://mail.163.com/html/ntesmail6
demo(网易邮箱6.0_2): http://www.dowebok.com/demo/2014/97/
fullPage百度百科2013介绍:http://www.dowebok.com/demo/2014/78/
(模拟页面 http://baike.baidu.com/event/shiji/2013)

2. onepage-scroll

onepage-scroll 是一款 jQuery 单页/全屏滚动插件,小巧而功能丰富,和 fullPage 一样非常适合做产品展示。

项目主页:https://github.com/peachananr/onepage-scroll
demo: http://www.dowebok.com/demo/120/
demo: http://www.thepetedesign.com/demos/onepage_scroll_demo.html

3. Scrollify

Scrollify 是一款基于 jQuery 的全屏滚动插件。

跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB。功能上虽不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js,但对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动。

项目主页:https://github.com/lukehaas/Scrollify
demo:
http://projects.lukehaas.me/scrollify/
http://www.dowebok.com/107.html

4. reveal.js

reveal.js 是一个基于CSS的3D幻灯片工具,效果绚丽,配置参数和 API 接口丰富。比较有特色的是,它还支持 MarkDown 语法的文档编译。

项目主页:https://github.com/hakimel/reveal.js
demo:
http://lab.hakim.se/reveal-js/
http://echarts.baidu.com/doc/slide/whyEcharts.html

5. slides.js

Slide Presentation Framework 是一个简洁高效的幻灯片演示框架组件,如果说前面介绍的组件都过于复杂或要求太高,那么 slides.js 或许是你需要的。

项目主页:https://github.com/briancavalier/slides
demo: http://www.briancavalier.com/code/slides/#0

6. deck.js

Deck.js是一个用于创建幻灯片展示效果的前端工具组件。页面切换没有 impress.js 绚丽,但是上手简单,页面制作难度低,使用者众多。

项目主页:https://github.com/imakewebthings/deck.js
demo: http://imakewebthings.github.com/deck.js

点赞 (0)
  1. 林三说道:
    Google Chrome 29.0.1547.66 Google Chrome 29.0.1547.66 Windows Server 2003 Windows Server 2003

    这个东西可以收藏下的说。

  2. 夏日博客说道:
    Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows XP Windows XP

    JS的组件代码过于庞大。。使用起来不是很方便。

    1. 任侠说道:
      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition

      前端必备,按需选择

  3. 影子说道:
    Google Chrome 38.0.2125.111 Google Chrome 38.0.2125.111 Windows 7 x64 Edition Windows 7 x64 Edition

    stackedit + wordpress + reveal.js + markdown 简直就是神组合。 stackedit 使用 markdown 语法编辑切可以实时预览,可以输出 html 直接发布到 wordpress 中。stackedit markdown 原文直接可以在 reveal.js 中播放幻灯片

    1. 任侠说道:
      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition

      你的那博客怎么又回来了

      1. 影子说道:
        Google Chrome 39.0.2171.71 Google Chrome 39.0.2171.71 Windows 7 x64 Edition Windows 7 x64 Edition

        一直都有的啊, 有段时间我更换服务器可能中断过

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code