打破常规,PPT还能这么做

Harry Huang原创,在电脑上浏览按F键可全屏

特殊时期,被激发的创作灵感

前段时间,因为疫情管控叠加找新工作的不顺利,经历了一段时间的迷茫。在压力之中,我开始思考并尝试创作一些新的内容 ~

一次简单却大胆的尝试

  • 因为不太擅长写文章表达,我尝试制作PPT,用简短的文字结合炫酷的布局和交互效果去展示

  • 但是用传统的PowerPoint软件需要排版,文件兼容性也是一大问题,我又开始思考能否运用技术手段制作在线版的PPT

  • 功夫不负有心人,通过摸索研究,在熟悉掌握了写作语法Markdown和在线演示开发工具Reveal.js之后,我成功做出可以在线演示的PPT

在线PPT,精彩不设限

  • 和传统的PPT文件相比,在线版PPT不用拷贝和传递文件、不用担心文件丢失、也不必担心文件在不同电脑设备的兼容性问题

  • 基本上在任何电脑、平板、手机等电子设备,只要打开浏览器进入在线PPT的网址就能直接访问

  • 废话不多说,向右翻,继续展示 ~

来吧,展示

首先在线PPT,也就是网页版PPT在布局排版和交互效果上和普通PPT文件基本一致,但由于网页元素的布局和交互更加灵活,普通PPT文件的一些无法实现的功能在网页版PPT可以轻松实现。比如页面切换,在这里我们分为一级页面二级页面左右翻页切换一级页面上下翻页切换二级页面,现在我们向下翻

Down arrow

二级页面第一页

我们已经切换到二级页面

Down arrow

继续向下翻

二级页面第二页

我们又切换到新的二级页面

Up arrow

点击向上箭头返回一级页面,继续浏览请向右翻

代码高亮显示

向右翻


						import React, { useState } from 'react';

						function Example() {
						  const [count, setCount] = useState(0);

						  return (
						    ...
						  );
						}
					

代码显示的动画效果

向右翻

页面切换的动画效果

不同页面的切换方式可以设定动画效果
向右翻

页面切换的动画效果

向右翻

页面切换的动画效果

向右翻

文字的动画效果

向下翻...

... 再向下翻 ...

... 然后呢,还是向下翻 ...

文字的动画效果

在这里,文字也可以有各式各样的效果,比如:

放大

缩小

消失

向右进入 - 向上进入 - 向下进入 - 向左进入

显示然后消失

显示然后字体淡化

字体颜色:变红 变蓝 变绿

幻灯片背景

你可以自定义设置幻灯片的背景色,比如灰色

Down arrow

也可以使用渐变色背景

Down arrow

还可以使用图片背景

背景切换

不同背景的页面切换也可以设定动态的效果

背景切换

比如可以通过放大缩小的动态效果切换

左右两列布局

左边:无序列表元素

  • 无序列表第一项
  • 无序列表第二项
  • 无序列表第三项
  • 无序列表第四项

右边:有序列表元素

  1. 有序列表第一项
  2. 有序列表第二项
  3. 有序列表第三项
  4. 有序列表第四项

以下是表格元素

Item Value Quantity
Apples $1 7
Lemonade $2 18
Bread $3 2

以下是文字引用

在这里文字引用有两种形式,一种是行内引用The nice thing about standards is that there are so many to choose from,另一种是区块引用,如下所示:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

感谢观看