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

Pocket

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

スポンサーリンク

■jquery「One Page Scroll」

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

OnePageScrollの画像

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

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

  1. GitHubからファイルをダウンロード
  2. ファイルを解凍して、「jquery.onepage-scroll.js」「onepage-scroll.css」を所定の場所へアップロード
  3. <head>内に以下のように記述する。
  4. <body>内に以下のように記述する。

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

3のスクリプトの設定は私が利用したもののみになります。
詳しくはGitHubの方を参照して下さい。

何か質問、誤情報、誤字などがあればコメントでお願いします。

Pocket