My RevealJS presentation – Vertical Slides – Fragmented Views

View Github Repository Open presentation in a new window

srigi

See all presentation from srigi

My RevealJS presentation – Vertical Slides – Fragmented Views

1 1

presentation-boilerplate-revealjs

Boilerplate template for my RevealJS presentations

On Github srigi / presentation-boilerplate-revealjs

My RevealJS presentation

od Igor Hlina / @srigi

Heads Up

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

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.

Markdown support

More info available here

<section data-markdown>
  ## Markdown support

  More info available [here](https://github.com/hakimel/reveal.js#markdown)
</section>

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Themes

Reveal.js comes with a few themes built in: Sky - Beige - Simple - Serif - Night - Default

* 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

    <section data-state="mystate">
       ...
    </section>

"mystate" will be added as a class to the document element when the slide is open.

Custom Events

    <section data-state="customevent">
       ...
    </section>
    
    Reveal.addEventListener('customevent', function(ev) {
      console.log(ev);
    });

Background Transitions

Background Transition Override

Quotes

“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

    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

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

Courtesy of highlight.js

Pretty Code


    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

Fragmented Views

Hit the next arrow...

... to step through ...

any type of view fragments This slide has fragments which are also stepped through in the notes window.

Fragment Styles

There's a few styles of fragments, like:

grow

shrink

roll-in

fade-out

highlight-red

highlight-green

highlight-blue

THE END