Reveal.js

CSS 3D Presentations

Heads Up

reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with support for CSS 3D transforms to see it in its full glory.

- Hakim El Hattab / @hakimel

What's the deal with Groovy?

Groovy is an agile and dynamic language for the Java Virtual Machine. Groovy's MarkupBuilder supports Groovy's builder pattern with XML/HTML.

- Thomas Westphal / @twest72 / twest72@github

Pretty Groovy Code for reveal.js

The following script contains the code for this page. 'example.groovy' is a Groovy script.

    sections.section {
    h2 'Pretty Groovy Code for reveal.js'
    p "The following script contains the code for this page. 'example.groovy' is a Groovy script."
    pre {
        code(class:'java', contenteditable: '') {
            mkp.yieldUnescaped new File("$scriptPath/example.groovy").text
        }
    }
    p {
        mkp.yield 'Courtesy of'
        a(href: 'http://softwaremaniacs.org/soft/highlight/en/description/', 'highlight.js')
    }
}


  

Courtesy of highlight.js

Vertical Slides

Slides can be nested inside of other slides,
try pressing down.

Basement Level 1

Press down or up to navigate.

Basement Level 2

Cornify

Basement Level 3

That's it, time to go back up.

Holistic Overview

Press ESC to enter the slide overview!

Works in Mobile Safari

Try it out! You can swipe through the slides pinch your way to the overview.

Transition Styles

You can select from different transitions, like:

Marvelous Unordered List

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

Fantastic Ordered List

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

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.

Pretty Code

    // pretty code example

var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined ||
        document.body.style['MozPerspective'] !== undefined ||
        document.body.style['perspective'] !== undefined;

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.match( /roll/g ) ) {
               node.className += ' roll';
               node.innerHTML = '' + node.innerHTML + '';
           }
       };
   }
}

linkify( 'a' );

  

Courtesy of highlight.js

Stellar Links

THE END

BY Hakim El Hattab / hakim.se