ラボラジアン JavaScript でスライドを作ってみました。
window.history オブジェクトの使い方も参考になるかと思います。
1. スクリーンショット
2. デモページ
以下のURLで実際のページを見ることができます。
デモページ
3. 内容
- 1つのHTML内に、全てのページの内容を記述します。
- 1つの記事を、1つの
<section>タグにまとめます。<section>タグに、id属性を指定します。値は “page” + ページ番号とします。- そうすれば、ページ遷移や現在のページ数表示などは勝手にやってくれます。
- URL末尾のハッシュでページを指定します。（
#1なら1ページ目、#2なら2ページ目となります） - ウェブブラウザの「戻る」「進む」に対応するために、
window.historyオブジェクトを使っています。 - 縦横比が気になる場合は、画面を拡大して下さい。
4. ソースコード
5. 参考情報
- Manipulating the browser history – Web APIs | MDN
- ブラウザの履歴を操作する – ウェブデベロッパーガイド | MDN
- WindowEventHandlers.onpopstate – Web APIs | MDN
- Manipulating the browser history – Web APIs | MDN
6. メモ
- 縦横比をどうするかが難しいです。
- 今回 React は使っていませんが、この手のページは React が合っているように思いました。
