OnepageR（GitHub）
こちらスクロールorスワイプに、リニアワイプのようにコンテンツが切り替わるテンプレートファイルです。どんな動きかはデモを見た方が早いと思います。
ダウンロードできるテンプレートファイルは非常に簡単なコーディングになっているので、すぐに使い始めることができます。
（sassファイルも一緒に入ってますが、sassをあまり使わない人はcssだけ抜き出しても問題ありません。）
必要なもの
最低限は、OnepageR（GitHub）から落とすダウンロードファイルの中に入っている main.cssと、jQuery、opr.jsが読み込めれば動作します。スマホ対応としてタッチやスワイプにも対応したい場合はjquery.touchSwipe.jsも読み込ませます。
<head> <link rel="stylesheet" href="css/main.css"/> <script src="jquery.min.js"></script> <script src="jquery.touchSwipe.min.js"></script> <script src="opr.js"></script> </head>
テンプレートの中身
ダウンロードファイルに入っている、index.htmlを見てみると下記のようなコードになっています。
<body>
<nav id="nav-main">
<ul class="opr-nav">
<li><a data-target="1">first</a></li>
<li><a data-target="2">second</a></li>
<li><a data-target="3">third</a></li>
<li><a data-target="4">fourth</a></li>
</ul>
</nav>
<div class="opr-container">
<div class="opr-page opr-current first" data-target="1">
<!--コンテンツ１を入れる-->
<!--次へのボタンには”opr-next”をつける-->
<div class="opr-next"></div>
</div>
<div class="opr-page second" data-target="2">
<!--コンテンツ２を入れる-->
<div class="opr-next"></div>
</div>
<div class="opr-page third" data-target="3">
<!--コンテンツ３を入れる-->
<div class="opr-next"></div>
</div>
<div class="opr-page fourth" data-target="4">
<!--コンテンツ４を入れる-->
<p> </p>
</div>
</div>
</body>
ナビゲーションにつけたdata-target属性と、コンテンツにつけたdata-targetを同じ値にすることによって、指定のパネルへの遷移することができます。
非常に簡単に動くので、記事を読み込むより試しにやってみるのが早いです。
気になったこと
ただ、僕が使ってみたうえでいくつか注意したいことがありました。
・背景画像を透過させる表現には使えないっぽい。
コンテンツを記述したボックスの重なり順は、固定ではなく遷移するたびに変化しているので重なりと透過pngなどを利用した表現をするのは難しそうです。
・写真の全画面表示をしたい場合もちょっと微妙
とても大きい１枚写真を使用するなら一応問題ないかもですが、background-size:cover;によって写真を背景にする場合、遷移させるさいにコンテンツボックスのサイズが変わるのに連動して背景画像もサイズが変わる場合があります。ちょっと動きが気持ちよくないのでこれを解決しないと個人的には写真背景には使えないなーという印象です。
結論としては単色べた塗りorパターン化した背景の場合には良さそう。
そういうデザインでPC、スマホともに一緒にコーディングしたい場合に良いかもしれません。
