前端工程师还学什么PPT，学reveal.js就够了！前端工程师还学什么PPT，学r

一、我为什么要研究reveal.js

公司会在月末我们这些新人准备一个月学习结果总结会，需要通过PPT来展示自己一个月来的学习成果。
之前参加过一次前端技术分享，记得有一个大牛在讲NPM的时候就用了一种类PPT效果的前端技术，后来又在看一个大牛的博客的时候，也看到了相同的类PPT效果的前端技术。
我就在想，这些是他们自己写出来的吗？好牛X啊，我也想研究研究自己写一个。翻到大牛的博客的github地址的时候，发现他Thanks了一个REVEAL.JS，我很奇怪，他没事thank这个干什么，于是随手一点，这一点不要紧，一下发现了黑科技！

文章图片
金手指

二、什么是reveal.js

reveal在英文中有很多意思，动词方面有揭露，启示，名词方面则是展现，我觉得启示就很不错，因为PPT就是通过分享自己的东西，来最终达到一个启示别人的效果。
就叫启示有点光秃秃的感觉，那么我们叫它“启示鸡”好了，大牛们都有属于自己的神鸡，感觉前端技术圈就是一个斗鸡的地方哈，前端技术圈可以叫鸡场了。
今天我们来认真研究一下这只启示鸡！

文章图片
启示鸡：HTML演讲框架

文章图片
启示鸡能够帮助你通过使用HTML创造出漂亮的交互式滑动板块。这个报告将为你展示启示鸡能做出的效果

三、如何使用reveal.js

文章图片
不是码农？这不是问题。在slides.com有一套完整版的可视化编辑器。

文章图片
这是slide.com编辑界面，需要注册一个账号，我暂时用的是免费版，想要更多功能可以尝试选择3种套餐中的一种

四、reveal.js各种黑科技功能详细介绍

① 垂直滑动

文章图片
垂直滑动：滑动可以彼此嵌套。空格键是进行下一次滑动的快捷键。

文章图片
第一级：嵌套滑动用来为高级别滑动添加更加详细的信息。

文章图片
第二级：点击向上箭头返回第一级。 ② 视图部分

文章图片
视图部分：按ESC键后显示缩略图。长按alt键后，再单击当前页面时进行可以放大。

文章图片
这是我按了ESC之后的缩略图效果，可以很清晰地看到当前PPT的视图结构

文章图片
长按alt再单击click，当前页面放大 ③ 支持触摸屏操控

文章图片
可触摸控制：报告在移动可触摸设备上显示良好。可以在板块间任意滑动。 ④ 支持markdown文本编辑器

文章图片
支持markdown文本编辑器。更多信息可以查阅reveal-js的github地址里的readme ⑤ 碎片化显示内容

文章图片
碎片化，逐条显示内容

文章图片
点击下箭头时

文章图片
1

文章图片
2

文章图片
3

文章图片
碎片化样式：可以添加一些动画之类的东西 ⑥ 过渡样式

文章图片
过度样式：你可以选择不同的过度效果

文章图片
这是应用Convex时的一个截图，个人最喜欢这个 ⑦ 主题

文章图片
其实就是对背景色和字体颜色做了一下修改

文章图片
这是Serif主题的效果 ⑧滑块背景（强大到令人发指）

文章图片
为data-background属性设置就可以改变按键颜色

文章图片
data-background同样也可以传入图片作为背景

文章图片
也可以设置repeat和size

文章图片
竟然可以传入视频作为背景

文章图片
Gif也可以！ ⑨背景过渡

文章图片
通过下面这条语句可以设置背景的过渡效果

文章图片
背景过渡可以无视每个滑块的过渡效果，比如我们现在的Convex ⑩漂亮的代码

文章图片
代码语法高亮显示 ?不可思议的课表？神奇的有序列表？扁平的表格？很普通啊...

文章图片
不可思议的课表

文章图片
神奇的有序列表

文章图片
扁平的表格 ?聪明的引用

文章图片
?星际穿越

文章图片
板块间而已跳转

文章图片
这是点击like this 后的结果 ?演讲者视图

文章图片
不明觉厉，点进去看了一下

文章图片
没看懂... 但是，按了S键后：

文章图片
?这些板块可以被以PDF的形式输出

文章图片
?全局声明

文章图片
意思貌似是我们在一个slide添加语句，会时时更新整个文件。 ?声明事件

文章图片
?休息一下

文章图片
按下B键后，会变成这样：

文章图片
?其他

文章图片
右到左的支持，扩展API，自动发展，视差背景，快捷键。
?结束

文章图片
参考Reveal.JS官方介绍链接：lab.hakim.se/reveal-js/#/（貌似需要翻墙）
我已经迫不及待得想去试试slide.com的编辑器了，这也太好玩了吧！
努力成为优秀的前端工程师！
突然发现用reveal.js也可以做毕设答辩报告！
>期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：
> - SegmentFault技术圈:[ES新规范语法糖](https://segmentfault.com/g/1570000010695363)
> - SegmentFault专栏：[趁你还年轻，做个优秀的前端工程师](https://segmentfault.com/blog/chennihainianqing)
>- 知乎专栏：[趁你还年轻，做个优秀的前端工程师](https://zhuanlan.zhihu.com/wyasy)
>- Github博客: [趁你还年轻233的个人博客](https://github.com/FrankKai/FrankKai.github.io)
>- 前端开发QQ群：660634678
>- 微信公众号：人兽鬼 / excellent_developers
![](https://upload-images.jianshu.io/upload_images/2976869-157e8624bcdfd62a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
【前端工程师还学什么PPT，学reveal.js就够了！】>努力成为优秀前端工程师！