ページ全体をプレゼン用スライド化するのに便利なライブラリです。
準備
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>
オプション値は長いので割愛していますが、ここで動作オプションの設定ができます。
