ホームページリニューアル準備：jQuery One Page Scroll編

photo by webmove
後期試験の勉強がすすまない。すでになんか勉強にたいする抵抗というか、やってると眠いし…うへぇ汗

とりあえずちょこっと触ったあとはホームページをいじってました。

jQuery One Page Scroll導入の検討

というわけで、無事合格していてもしていなくても、多分春にリニューアルするかもしれないホームページの実装案としてワンページスクロール型の導入を検討しているのでその試みの実験としてjQuery One Page Scroll by Pete R. | The Pete Designをいじってみました。

ハマったところ

正直かなりバカなハマり方でしたが、Googleの特別サイトからjQueryを参照する方法があるじゃないですか。
あれの例のところをコピーして何も考えず貼り付けてたらhttp:が抜けていたんですね。それでしばらくはちゃんと実行されず苦しみました。（jQuery1.9.1以降が必ず必要です。）
また、もうひとつはjQueryをせっかくだからとmobileも一緒に参照していたのですが、これをすると文字が表示されなくなってしまいます。（詳しいことはjQuery詳しい人に聞いてくださいw）
とりあえずこの二つにはハマりましたがなんとか動作確認がとれました。

使い方

僕みたいなハマり方をしなければ使い方は簡単です。
さきほどのサイトからGitHubにとんでダウンロードしたらその中のcssとjavascript、およびjQueryを読み込みます。
その後、divでclassをmainなどに指定してその中にsectionで各ページを作っていきます。
そして最後に以下のようなjavascriptをホームページ内に書き込めばOKです。

$(document).ready(function(){
    $(".main").onepage_scroll({
        sectionContainer: "section",
    });
});

感想

ぬるぬる動いてかっこいいです。

作品ページなどで考えている仕様と両立できたら、リニューアルに取り入れようと思っています。