ページ全体をプレゼン用スライド化するのに便利なライブラリです。
準備
Githubリポジトリからパッケージをダウンロードしましょう。
落としてきたファイルを展開し、css、js、lib、pluginフォルダを実際に利用する場所へ適宜移動させましょう。
index.htmlを開けばすでにReveal.jsが動作する状態なので、これをベースに調整しても良いと思います。
HTML
まずはヘッダー内でCSSの読み込み。
用意されているテーマCSSを切り替えるだけで色合いを変更できます。
<head> ~ <link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme"> </head>
スライドの基本構造は下記になり、sectionがスライド1ページ分の領域になります。
<div class="reveal"> <div class="slides"> <section>ページ1</section> <section>ページ2</section> <section>ページ3</section> </div> </div>
そしてbodyを閉じる直前にJSの読み込み。
サンプルで入っているindex.htmlをそのままコピペすると楽です。
<script src="assets/lib/js/head.min.js"></script> <script src="assets/js/reveal.min.js"></script> <script>~</script>
オプション値は長いので割愛していますが、ここで動作オプションの設定ができます。