各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR
Post on:2014年12月19日
sponsorsr
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。
キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。
OnePageRのデモ
デモはデスクトップでも、タブレット・スマホでも楽しめます。
ページの操作は、通常のスクロール、上部のナビゲーション、下部のアロー、キーボードの矢印キーに対応しています。
デモのアニメーションgif
タブレットやスマホではナビゲーションとアローのタッチ、スワイプ操作にも対応しています。試してみましたが、もたつき感はありませんでした。
デモページ：スマホで表示
OnePageRの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。
[html]
...
...
コンテンツ
...
[/html]
モバイルでのタッチ・スワイプ操作に対応するには、jQueryのプラグイン「TouchSwipe」も加えます。
[html]
...
コンテンツ
...
[/html]
Step 2: HTML
コンテンツとナビゲーションは非常にシンプルな実装です。
各パネルと対応するナビゲーションのアイテムにdata属性を付与します。
[html]
[/html]
外部ファイルもまとめると、こんな感じに。
[html]
[/html]
ライセンスはUnlicenseで、個人でも商用でもクライアントプロジェクトでも自由に利用できます。
sponsors
