[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll

サイト構築 -JavaScript

Post on:2013年9月24日

One Page Scrollのデモ

デモはデザインもiPhone風になっています。

デモページ

次のパネルを表示するのはスクロール操作と右のナビゲーションで、ちょっとスクロールするだけで次のパネルをちょうどいい位置へスクロールしてくれます。

スクロールのエフェクトはデフォルトで「ease」で、「ease-in」「ease-out」「linear」など、多彩なアニメーションが利用できます。

デモページ：3番目のパネルを表示

各パネルへの直リンクやURL表示にも対応しています。

One Page Scrollの使い方

Step 1: 外部ファイル

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

<head>
 ...
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="jquery.onepage-scroll.js"></script>
 <link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
</head>

Step 2: HTML

mainはコンテナで、各パネルはsection要素で実装します。

<body>
  ...
  <div class="main">
    <section>...</section>
    <section>...</section>
    ...
  </div>
  ...
</body>

Step 3: JavaScript

コンテナをjQueryのセレクタで指定し、スクリプトを実行します。

$(".main").onepage_scroll();

オプションではスクロールのアニメーションのエフェクトやページネーションの有無、URL対応などの機能を設定できます。

$(".main").onepage_scroll({
   sectionContainer: "section", // セクションとなる要素（divなどに変更も可）
   easing: "ease", // イージング、他にも多数のエフェクトを用意 "ease", "linear", "ease-in", "ease-out", "ease-in-out", "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000, // アニメーションの時間
   pagination: true, // ページネーションの有無
   updateURL: false // ページをスクロールした際にURLも変更するかの有無
});