OnePageRを少しいじってみました

コリスさんのところで少し前に紹介されていたOnePageRをいじってみました。
気づいたとことか、軽くメモ。

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR

ダウンロード

OnePageR -GitHub

設置

githubのページを見るとわかるとおりの構成で、そのままアップすればOKです。

.opr-pageというクラスがついたdivが、スライドする各ページコンテンツの単位となり、その中に書いた内容は普通にhtmlとして表示されます。

sassのファイルもDLできますので、css編集も楽チンです。

以下、気になったことをいくつか試してみました。試したものは以下にアップしています。

デモ

縦のコンテンツが多い場合はどうなるのか

デモ中のFIRSTにウインドウサイズを超える縦長のHTMLを入れてみました。

どうやら各コンテンツの表示エリアはブラウザの縦サイズのみに依存し、それを超える量がある場合にはオーバーフローして、見ることができないようです。

デモでは次へボタンのみだけど、戻るボタンは?

jsのソース見たところ.opr-nextと.opr-prevにクリックイベントがありましたので.opr-prevも置いてクリックしてみたら上に戻るボタンとして機能しました。

コンテンツの数は増やせる?

.opr-pageのクラスをふったdivを増やすことでコンテンツは普通に増やせるみたいです。

その際、ナビゲーションのdata-targetとコンテンツのdata-targetを一致させればナビゲーションリンクが動きます。data-targetが適当でも動くっちゃ動くみたいですが、同じ番号を入れたdivが複数ある場合は、その番号の中で一番下にあるコンテンツに向かい、間は無視されました。

使いどころは・・・

中に入れたいテキストや画像の高さが固定で決まっていて、それがユーザーのブラウザサイズ内に収まる保証があるようなサイトを作る場合には、かなり簡単に紙芝居的な仕組みを実装できるのがいいなと思いました。

ただ、コンテンツが伸びた(後々伸びる)場合にはちょっと検討が必要かな、といったところですね。いつか機会があれば使ってみようと思います。