スクロールで1ページ毎にコンテンツを表示させる「One Page Scroll」

よくある1ページのサイトのスクロールで表示を切り替えていくものです。
jqueryを利用しています。
記事そのものは昔のブログの転載なので正常に動作しない可能性があります。

■jquery「One Page Scroll」

デモを見れば、あぁこれか、となると思います。なかなか日本語で説明するのが難しい。

デモ(demo)：http://www.thepetedesign.com/demos/onepage_scroll_demo.html
GitHub：https://github.com/peachananr/onepage-scroll

■実装手順（jqueryのバージョンは「1.9.0」以上で動作すると思います。）

GitHubからファイルをダウンロード
ファイルを解凍して、「jquery.onepage-scroll.js」「onepage-scroll.css」を所定の場所へアップロード

<head>内に以下のように記述する。

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.onepage-scroll.js"></script>
<link href="css/onepage-scroll.css" rel="stylesheet">

<script>
$(".main").onepage_scroll({
   sectionContainer: "section",     // それぞれのコンテンツを「section」内に記述する設定
   easing: "ease",                  // イージングとはアニメーションの種類のようなもの、他にもいくつかある
   animationTime: 1000,             // アニメーションの時間、お好みで
   pagination: true,                // ページネーションとは各ページへのリンクを並べて表示、みたいな
   loop: true,                     // 一番下までスクロールして次のスクロールで一番上に戻るか、戻らないかの設定
   keyboard: true,                  // キーボードでの操作を有効にするか、しないか
});
</script>

<body>内に以下のように記述する。

body内の記述
Default

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

1
2
3
4

...
...

それぞれのコンテンツを<section>内に記述し、それら全てを「main」で囲む形。