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