シングルページのためのjQueryプラグイン4選(前編)

jQuery One Page Scroll by Pete R. - The Pete Design

シングルページのテンプレート作成に取り掛かっています。

ko.a laboratoryも1ページで構成されていて、スクロールにはscrolldeckを使用しています。

まあ、これでも問題はないんですが、メニューがペタッと上に貼りつく機能も同梱されていれば楽だなー、と思って別のプラグインを探す旅に出ました。

その結果。

3時間の間に3つのプラグインを入れたり外したりカスタマイズしたりして、最後には全部やめました。

時間がもったいなかった、とは言わせたくないのでここに記録として残しておこうと思います。今度使うかもしれないし。

One Page Scroll

jQuery One Page Scroll by Pete R. - The Pete Design

[DEMO]

少しスクロールしただけで、次のコンテンツトップまでスルスルッと気持ちよく動きます。

カッコイイです。

でも、今回のテンプレートのコンセプトとマッチしなかったので、残念ながらボツになりました。

使い方はとても簡単です。

githubからファイルをダウンロードします。

headでスクリプトファイルとスタイルシートを読み込みます。

WordPressだと、こんな感じで読み込みますよね。
[php]//onepagescrollスタイルシートの読み込み
wp_register_style( ‘onepagescroll_stylesheet’, get_stylesheet_directory_uri() . ‘/library/css/onepage-scroll.css’, array(), ”, ‘all’ );

//onepagescrollスクリプト読み込み
wp_register_script( ‘onepagescroll_js’, get_stylesheet_directory_uri() . ‘/library/js/jquery.onepage-scroll.js’, array( ‘jquery’ ), ”, false );

// googleAPIのjqueryを使用
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’, array(), ‘1.9.1’);

wp_enqueue_style( ‘onepagescroll_stylesheet’ );
wp_enqueue_script( ‘onepagescroll_js’ );
[/php]
mainクラスの中のsection要素にコンテンツを入れます。(mainクラスは自分の好きなクラス名に変えれます)

あとは、スクリプトを指定して完了です。
[code lang=”js”]
<script>
jQuery(".main").onepage_scroll();
</script>
[/code]
オプションもたくさんあります。

アニメーションの動きとか速さとかを指定できます。 詳しくはこちらを参考にしてください。

https://github.com/peachananr/onepage-scroll

SMINT

 

SMINT - The simple jQuery plugin for lovers of one page websites.

[DEMO]

このプラグインは気持ちよくスクロールするだけでなく、ナビゲーションメニューが上部に固定されます。

しかも、とっても簡単!

使い方です。

こちらからファイルをダウンロードします。

http://www.outyear.co.uk/smint/download/

スタイルシートとスクリプトファイルを読み込みます。
[php]//スタイルシートの読み込み
wp_register_style( ‘smnt-stylesheet’, get_stylesheet_directory_uri() . ‘/library/css/grid/demo.css’, array(), ”, ‘all’ );

//スクリプトの読み込み
wp_register_script( ‘smint_js’, get_stylesheet_directory_uri() . ‘/library/js/jquery.smint.js’, array( ‘jquery’ ), ”, false );

// googleAPIのjqueryを使用
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, array(), ‘1.7.1’);

wp_enqueue_style( ‘smnt-stylesheet’ );
wp_enqueue_script( ‘smint_js’ );
[/php]
HTMLはこんな感じです。
[html]
<!– スクリプト部分 –>
<script>
jQuery(document).ready( function($) {
$(‘.subMenu’).smint({
‘scrollSpeed’ : 1000
});
});
</script>
<!– メニュー –>
<div class="subMenu">
<div class="inner"><a id="sTop" class="subNavBtn" href="#">Home</a> <a id="s1" class="subNavBtn" href="#">Section 1</a></div>
</div>
<!– コンテンツ部分 –>
<div class="section sTop">
<div class="inner">
<h1>Welcome to the SMINT Demo page!</h1>
Click the links below to see it in action!
</div>
</div>
<div class="section s1">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>
[/html]
とても簡単に出来たのですが、WordPressのカスタムナビゲーションに対応させるためには少しカスタマイズが必要でした。

なので、後回しです。他に良いのがなければカスタマイズしてみようと思います。

あと、できればコンテンツ部分にはdiv要素ではなくsection要素を使いたいので、そこも要カスタマイズでした。

まだ2選なんですが、4つのプラグインと戦った後の記事アップで息切れしてきたので次回にしようと思います。