- Presentations work on touch devices such as phones and tablets. Simply swipe through your slides. + Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. +
+Hit the next arrow...
+... to step through ...
+any typeThere's a few styles of fragments, like:
+grow
+shrink
+roll-in
+fade-out
+highlight-red
+current-visible
+highlight-current-blue
+
+ You can select from different transitions, like:
+ None -
+ Fade -
+ Slide -
+ Convex -
+ Concave -
+ Zoom
+
+ Reveal.js comes with a few themes built in:
+ Default -
+ 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>. +
+ 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 page background.
+
+ 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' );
+} );
+
+ Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.
+
+ <section data-background="image.png"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+ Different background transitions are available via the backgroundTransition option. This one's called "zoom".
+
+ You can override background transitions per slide by using data-background-transition="zoom".
+
- You can select from different transitions, like:
- Default -
- None -
- Fade -
- Slide -
- Concave -
- Zoom
-
- Reveal.js comes with a few themes built in:
- Default -
- 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>.
-
-
- 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.
-
- 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' );
-} );
-
- Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.
-
<section data-background="image.png"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
- Different background transitions are available via the backgroundTransition option. This one's called "zoom".
-
- You can override background transitions per slide by using data-background-transition="slide".
-
@@ -303,34 +332,6 @@ function linkify( selector ) {
Hit the next arrow...
-... to step through ...
-any typeThere's a few styles of fragments, like:
-grow
-shrink
-roll-in
-fade-out
-highlight-red
-current-visible
-highlight-current-blue
-