reveal.js - The HTML Presentation Framework
Reveal.js框架介绍
首页
汉化：李响
咳咳，首先……
reveal.js 是一个可以制作酷炫的HTML演示的框架。你只要有一个支持CSS 3D切换的浏览器。
垂直滚动
Slides页可以藏在其他Slides页内部。
试试按下“down”吧~
地下一楼
按up或者down️来切换。
地下二楼
下面还有哦。
地下三楼
好了，我们可以走了。
事实上，我们可以直接切换到下一个slides。
Slides
对编程水平要求不高。
概览模式
按 ESC 进入slides概览模式。
Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.
在iPhone上也可以哦！
Try it out! You can swipe through the slides and pinch your way to the overview.
无序列表
- No order here
- Or here
- Or here
- Or here
有序列表
- One is smaller than...
- Two is smaller than...
- Three!
页面切换风格
You can select from different transitions, like:
立方体cube -
翻页page -
凹面concave -
放大zoom -
线性linear -
渐现fade -
无none -
默认3D
多种主题
Reveal.js comes with a few themes built in:
默认灰色 -
粉蓝sky -
土豪金beige -
白底黑字simple -
衬线serif -
纯黑night
墨水蓝moon -
乳黄solarized
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.
Global State
Set data-state="something" on a slide and "something"
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the background.
Custom Events
Additionally custom events can be triggered on a per slide basis by binding to the data-state name.
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
Slide Backgrounds
Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.
Image Backgrounds
<section data-background="image.png">
Repeated Image Backgrounds
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
Background Transitions
Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.
Background Transition Override
You can override background transitions per slide by using data-background-transition="slide".
智能引用
行内引用
“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.”
代码高亮
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className ) {
node.className += ' roll';
}
}
}
}
Courtesy of highlight.js.
内部链接
You can link between slides internally,
转到第二页第三层.
分步显示
Hit the next arrow...
... to step through ...
any type- of view
- fragments
class="fragment"
分步显示样式
There's a few styles of fragments, like:
grow
shrink
roll-in
fade-out
highlight-red
highlight-green
highlight-blue
current-visible
highlight-current-blue
Spectacular image!
Export to PDF
休息一会！
按“B”来暂停演示。
项目链接
THE END