よくある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>内に以下のように記述する。
123
12345678910$(".main").onepage_scroll({sectionContainer: "section", // それぞれのコンテンツを「section」内に記述する設定easing: "ease", // イージングとはアニメーションの種類のようなもの、他にもいくつかあるanimationTime: 1000, // アニメーションの時間、お好みでpagination: true, // ページネーションとは各ページへのリンクを並べて表示、みたいなloop: true, // 一番下までスクロールして次のスクロールで一番上に戻るか、戻らないかの設定keyboard: true, // キーボードでの操作を有効にするか、しないか}); - <body>内に以下のように記述する。
1234... ...
それぞれのコンテンツを<section>内に記述し、それら全てを「main」で囲む形。
3のスクリプトの設定は私が利用したもののみになります。
詳しくはGitHubの方を参照して下さい。
何か質問、誤情報、誤字などがあればコメントでお願いします。