JavaScript でスライドを作ってみました

JavaScript でスライドを作ってみました。

window.history オブジェクトの使い方も参考になるかと思います。

1. スクリーンショット

2. デモページ

以下のURLで実際のページを見ることができます。

3. 内容

• 1つのHTML内に、全てのページの内容を記述します。
• 1つの記事を、1つの<section>タグにまとめます。
  • <section>タグに、id属性を指定します。値は “page” + ページ番号とします。
  • そうすれば、ページ遷移や現在のページ数表示などは勝手にやってくれます。
• URL末尾のハッシュでページを指定します。（#1 なら1ページ目、#2 なら2ページ目となります）
• ウェブブラウザの「戻る」「進む」に対応するために、window.historyオブジェクトを使っています。
• 縦横比が気になる場合は、画面を拡大して下さい。

4. ソースコード

• laboradian/js-slides-sample001

5. 参考情報

• Manipulating the browser history – Web APIs | MDN
• ブラウザの履歴を操作する – ウェブデベロッパーガイド | MDN
• WindowEventHandlers.onpopstate – Web APIs | MDN
• Manipulating the browser history – Web APIs | MDN

6. メモ

• 縦横比をどうするかが難しいです。
• 今回 React は使っていませんが、この手のページは React が合っているように思いました。