From 3126db0a460dcfa4bf7b51555180263c6e8832dd Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 5 Nov 2014 12:54:00 +0100 Subject: [PATCH] update order of default slides --- index.html | 273 +++++++++++++++++++++++++++-------------------------- 1 file changed, 137 insertions(+), 136 deletions(-) diff --git a/index.html b/index.html index 0fca2cb..98fc49b 100644 --- a/index.html +++ b/index.html @@ -102,14 +102,148 @@
-

Mobile Support

+

Touch Optimized

- 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. +

+
+ +
+ +
+ +
+
+

Fragments

+

Hit the next arrow...

+

... to step through ...

+
    +
  1. any type
    2. +
  2. of view
    3. +
  3. fragments
    4. +
+ + +
+
+

Fragment Styles

+

There's a few styles of fragments, like:

+

grow

+

shrink

+

roll-in

+

fade-out

+

highlight-red

+

current-visible

+

highlight-current-blue

+
+
+ +
+

Transition Styles

+

+ You can select from different transitions, like:
+ None - + Fade - + Slide - + Convex - + Concave - + Zoom +

+
+ +
+

Themes

+

+ 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>. +

-

Marvelous Unordered List

+

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 page background. +

+
+ +
+

State 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. +

+ + Down arrow + +
+
+

Image Backgrounds

+ 
<section data-background="image.png">
+
+
+

Tile Backgrounds

+ 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+
+
+ +
+

Background Transitions

+

+ Different background transitions are available via the backgroundTransition option. This one's called "zoom". +

+
+ +
+

Background Transitions

+

+ You can override background transitions per slide by using data-background-transition="zoom". +

+
+ +
+

Marvelous List

-
- -
- -
-

Transition Styles

-

- You can select from different transitions, like:
- Default - - None - - Fade - - Slide - - Concave - - Zoom -

-
- -
-

Themes

-

- 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>. - -

-
- -
-

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. -

- - Down arrow - -
-
-

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

-

- Different background transitions are available via the backgroundTransition option. This one's called "zoom". -

-
- -
-

Background Transitions

-

- You can override background transitions per slide by using data-background-transition="slide". -

-
-

Clever Quotes

@@ -303,34 +332,6 @@ function linkify( selector ) {

-
-
-

Fragmented Views

-

Hit the next arrow...

-

... to step through ...

-
    -
  1. any type
    2. -
  2. of view
    3. -
  3. fragments
    4. -
- - -
-
-

Fragment Styles

-

There's a few styles of fragments, like:

-

grow

-

shrink

-

roll-in

-

fade-out

-

highlight-red

-

current-visible

-

highlight-current-blue

-
-
-

Spectacular image!