Reveal.js:HTML表示框架

2020-11-28 06:53:26

manifest.js使您可以使用HTML创建漂亮的交互式幻灯片。本演示将向您展示其功能的示例。

不是编码员?没问题有一个功能齐全的可视化编辑器可以编写这些内容,请在https://slides.com上进行尝试。

从'react'导入React,{useState};函数Example(){const [count,setCount] = useState(0);返回(...); }

从'react'导入React,{useState};函数Example(){const [count,setCount] = useState(0); return( 您点击了{count}次 setCount(count + 1)}>单击我 ); }函数SecondExample(){const [count,setCount] = useState(0); return( 您点击了{count}次 setCount(count + 1)}>单击我 ); }

按住alt键(在Linux中为ctrl),然后单击任意元素以使用zoom.js对其进行缩放。再次单击以缩小。

在手机和平​​板电脑等触摸设备上,演示效果很好。只需在幻灯片中滑动即可。

您可以选择不同的过渡效果,例如:无-淡入淡出-滑动-凸面-凹面-缩放

在幻灯片上设置data-background =“#dddddd”以更改背景颜色。支持所有CSS颜色格式。

由于Reveal.js在Web上运行,因此您可以轻松嵌入其他Web内容。尝试在后台与页面进行交互。

这些人有两种内联形式:关于标准的好处是,有太多可供选择和阻止的标准:

“多年来,一直有一种理论认为,数百万只猴子在数百万台打字机上随机打字会重现莎士比亚的全部作品。互联网证明了这一理论是不正确的。”

有发言者视图。它包括一个计时器,即将播放的幻灯片的预览以及演讲者的备忘。

哦,这些是一些笔记。它们将隐藏在您的演示文稿中,但是如果您打开演讲者备注窗口(在键盘上按“ s”),则可以看到它们。

在幻灯片上设置data-state =“ something”,并且在打开幻灯片时,“ something”将作为类添加到文档元素。这使您可以应用更广泛的样式更改,例如切换页面背景。

另外,可以通过绑定到数据状态名称在每个幻灯片的基础上触发自定义事件。

按B或。在键盘上暂停演示文稿。当您在舞台上并想将分散注意力的幻灯片从屏幕上移开时,这很有用。