2016Fall CADPA 課程

The HTML Presentation Framework

Created by Hakim El Hattab / @hakimel

github_intro

2016-09-23_cpb_github_intro from 虎尾科大機械設計工程 on Vimeo.

fork_pull_requests

2016-09-23_fork_pull_requests from 虎尾科大機械設計工程 on Vimeo.

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. Two is smaller than...
3. Three!

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