2016 Fall 電腦輔助設計實習課程

2016Fall CADPA 課程

The HTML Presentation Framework

Created by Hakim El Hattab / @hakimel

blog

github_intro

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

fork_pull_requests

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

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.


Down arrow

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