Reveal.jsを使ってみた

Reveal.jsとは

  • HTMLでプレゼンテーションのスライドが書けるフレームワーク
  • Markdownも使える

使い方

  1. https://github.com/hakimel/reveal.js.git よりgit clone
  2. index.htmlを編集する

上下にもスライドを動かすことができる

下 1

下 2

補足などに使うらしいです。

スライド一覧、ズーム

  • ESCボタン押下でスライドOverviewを表示
  • Alt + clickでzoom（zoom.js）

sボタン押下でSpeaker View

Code


'use strict'

eventsApp.controller('EditEventController',
    function EditEventController($scope) {
        $scope.saveEvent = function(event) {
            window.alert('event ' + event.name + ' saved!');
        }
        $scope.cancelEdit = function() {
            window.location = "/EventDetails.html";
        }
    }
);

スライド遷移の方法

None - Fade - Slide - Convex - Concave - Zoom

用意されているスタイル

Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

MathJaxも使えた

$$ f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} exp({-\frac{(x-\mu)^2}{2\sigma^2}}) $$

他に

他にも背景を動画にしたりもできるらしいです！

動画！！

おわり