网页PPT: reveal.js 介绍

reveal.js

reveal.js 是个啥

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

优势

和传统的PPT相比,reveal.js 有哪些吸引我的地方呢?主要有:

  • 制作简单:对程序员来说,只是做个页面而已;对非程序员可以使用在线编辑器
  • 运行简单:因为是一个HTML文件,那么只要双击,就能在浏览器中展示。(注:为了更好的效果,还是用高级浏览器打开比较好,虽然它对IE8及以上版本的旧浏览器做了优雅降级。更详细的浏览器支持,见这里
  • 功能强大,灵活:因为是在浏览器中运行的,可以用HTML+CSS+JS,做各种想要的东西:比如与现场的用户进行交互(如用户在手机上进行一些投票,页面上实时显示投票数);并且,reveal.js 有多套默认皮肤,支持 多种PPT切换动画,Fragments,内联PPT( nested slides),代码高亮,解析 Markdown,懒加载图片和视屏,导出为PDF和一系列的 JS API 等特性

安装

小白版安装

  1. 下载: https://github.com/hakimel/reveal.js/releases
  2. 解压下载的文件。将 index.html 里的内容替换成自己的内容
  3. 打开 index.html 来查看效果

完整版安装

reveal.js 的某些特性需要服务器端的支持,如 外部Markdown,演讲者注释。如果要用这些功能,需要安装完整版。步骤如下

  1. 安装 Node.js
  2. 安装 Grunt
  3. 下载 $ git clone https://github.com/hakimel/reveal.js.git
  4. 到 reveal.js 文件夹 $ cd reveal.js
  5. 安装依赖 $ npm install
  6. 运行 $ grunt serve
  7. 打开 http://localhost:8000 来查看

你也可以改变端口用 grunt serve --port 8001

DEMO

最后附上 一丝 用 reveal.js 做的高大上的demo

是不是很高大上,哈哈。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏月色的自留地

在越狱的iPhone/iPad上安装自开发环境

自开发跟自编译意思一样,后者表示一个开发语言的开发能力成熟度;前者则表示一个开发平台的开发能力成熟度。 iPhone跟iPad面世这么多年,一直无法摆脱“...

3441
来自专栏古时的风筝

webscraper 最简单的数据抓取教程,人人都用得上

这么简单的工具当然对环境的要求也很简单了,只需要一台能联网的电脑,一个版本不是很低的 Chrome 浏览器,具体的版本要求是大于 31 ,当然是越新越好了。目前...

4310
来自专栏DeveWork

WordPress评论回复邮件样式美化教程

在上一篇文章《 免插件仅代码实现WordPress评论回复邮件 》中Jeff 提供了三种回复邮件样式类型。在你将需要的类型实现后,如果去测试一下,你会发现邮件的...

2746
来自专栏IT大咖说

Redux助力美团点评前端进阶之路

摘要 都说Redux好,但Redux到底好在哪,它真的解决了业务中遇到的问题吗? 因为在业务中引入Redux而带来的额外成本是否让你苦恼过? 会不会是我们打开R...

3394
来自专栏假装我会写代码

两行代码实现一个地址选择器

2402
来自专栏我的小碗汤

【插件】解放鼠标,让浏览器更智能

首先感谢大家参与这周的送书活动。已经给小助手微信发送好友请求的,不要着急,这两天会通过验证,并拉大家进入抽奖群参与抽奖,大家肯定都可以参与的。

1002
来自专栏前端架构与工程

前后端分离和模块化-58到家微信首页重构之路

微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题: 每个城...

2398
来自专栏上善若水

P003PHP之用户页面注册信息填写页面[转]

php用户注册页面填写信息完整实例,内容包括邮箱自动匹配、密码强度验证以及防止表单重复等.

1493
来自专栏Alice

js跳转界面

js页面跳转大全 所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面。 ...

8257
来自专栏编程

vuejs开发H5页面总结

最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开...

4459

扫码关注云+社区

领取腾讯云代金券