diff --git a/lab.html b/lab.html deleted file mode 100644 index 0e1ae6b..0000000 --- a/lab.html +++ /dev/null @@ -1,526 +0,0 @@ - - - - - - - reveal.js – The HTML Presentation Framework - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
-

Reveal.js

-

The HTML Presentation Framework

- -
- -
-

Hello There

-

- reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. -

-
- - -
-
-

Vertical Slides

-

Slides can be nested inside of each other.

-

Use the Space key to navigate through all slides.

-
- - Down arrow - -
-
-

Basement Level 1

-

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

-
-
-

Basement Level 2

-

That's it, time to go back up.

-
- - Up arrow - -
-
- -
-

Slides

-

- Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at http://slides.com. -

-
- -
-

Point of View

-

- Press ESC to enter the slide overview. -

-

- Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. -

-
- -
-

Touch Optimized

-

- Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. -

-
- -
- -
- -
-
-

Fragments

-

Hit the next arrow...

-

... to step through ...

-

... a fragmented slide.

- - -
-
-

Fragment Styles

-

There's different types of fragments, like:

-

grow

-

shrink

-

fade-out

-

fade-up (also down, left and right!)

-

current-visible

-

Highlight red blue green

-
-
- -
-

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:
- - Black (default) - - White - - League - - Sky - - Beige - - Simple
- Serif - - Blood - - Night - - Moon - - Solarized -

-
- -
-
-

Slide Backgrounds

-

- Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported. -

- - Down arrow - -
-
-

Image Backgrounds

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

Tiled Backgrounds

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

Video Backgrounds

- 
<section data-background-video="video.mp4,video.webm">
-
-
-
-

... and GIFs!

-
-
- -
-

Background Transitions

-

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

- 
Reveal.configure({ backgroundTransition: 'zoom' })
-
- -
-

Background Transitions

-

- You can override background transitions per-slide. -

- 
<section data-background-transition="zoom">
-
- -
-

Pretty Code

- 

-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';
-      }
-    }
-  }
-}
-
-

Code syntax highlighting courtesy of highlight.js.

-
- -
-

Marvelous List

-
    -
  • No order here
    • -
  • Or here
    • -
  • Or here
    • -
  • Or here
    • -
-
- -
-

Fantastic Ordered List

-
    -
  1. One is smaller than...
    2. -
  2. Two is smaller than...
    3. -
  3. Three!
    4. -
-
- -
-

Tabular Tables

- - - - - - - - - - - - - - - - - - - - - - - - - -
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
-
- -
-

Clever Quotes

-

- These guys come in two forms, inline: - “The nice thing about standards is that there are so many to choose from” and block: -

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

Intergalactic Interconnections

-

- You can link between slides internally, - like this. -

-
- -
-

Speaker View

-

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

-

Press the S key to try it out.

- - -
- -
-

Export to PDF

-

Presentations can be exported to PDF, here's an example:

- -
- -
-

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' );
-} );
-
-
- -
-

Take a Moment

-

- Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. -

-
- -
-

Much more

- -
- -
-

THE END

-

- - Try the online editor
- - Source code & documentation -

-
- -
- -
- - - - - - - - - - - - - - - - - - - -