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

サイト構築 -JavaScript

Post on:2014年12月19日

sponsorsr

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。

キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。

OnePageR -GitHub

OnePageRのデモ
OnePageRの使い方

OnePageRのデモ

デモはデスクトップでも、タブレット・スマホでも楽しめます。

デモページ

ページの操作は、通常のスクロール、上部のナビゲーション、下部のアロー、キーボードの矢印キーに対応しています。

デモのアニメーションgif

タブレットやスマホではナビゲーションとアローのタッチ、スワイプ操作にも対応しています。試してみましたが、もたつき感はありませんでした。

デモページ：スマホで表示

OnePageRの使い方

Step 1: 外部ファイル

当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="js/opr.js"></script>
</body>

モバイルでのタッチ・スワイプ操作に対応するには、jQueryのプラグイン「TouchSwipe」も加えます。

<body>
  ...
  コンテンツ
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="js/jquery.touchSwipe.min.js"></script>
  <script src="js/opr.js"></script>
</body>

Step 2: HTML

コンテンツとナビゲーションは非常にシンプルな実装です。
各パネルと対応するナビゲーションのアイテムにdata属性を付与します。

<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">
        <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>&nbsp;</p>
    </div>
</div>

</body>

外部ファイルもまとめると、こんな感じに。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>OnePageR</title>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<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">
        <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>&nbsp;</p>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/opr.js"></script>

</body>
</html>

ライセンスはUnlicenseで、個人でも商用でもクライアントプロジェクトでも自由に利用できます。