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

fullPage.js One Page Scroll Sites

シングルページのためのjQueryプラグイン4選(前編)途中で息切れしてしまったので、後編です。
前編では、以下の二つのプラグインを取り上げました。

  1. One Page Scroll
  2. SMINT

後編ではシングルページサイトのスクロールがスタイリッシュになる、さらに二つのjQueryプラグインをご紹介します。

fullPage.js

fullPage.js One Page Scroll Sites

[DEMO]

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

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

headでスクリプトファイルとスタイルシートを読み込みます。jquery.min.jsとjquery-ui.min.jsも読み込みます。

もし、optionで’scrollOverflow’を’true’にする場合は、jquery.slimscroll.min.jsも読み込みます。





[php]//fullPage.jsスタイルシートの読み込み
wp_register_style( ‘fullPage_stylesheet’, get_stylesheet_directory_uri() . ‘/library/css/jquery.fullPage.css’, array(), ”, ‘all’ );

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

//optionで’scrollOverflow’を’true’にする場合はjquery.slimscroll.min.jsも読み込み
wp_register_script( ‘slimscroll_js’, get_stylesheet_directory_uri() . ‘/library/js/jquery.slimscroll.min.js’, array( ‘jquery’ ), ”, false );

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

wp_enqueue_style( ‘fullPage_stylesheet’ );
wp_enqueue_script( ‘fullPage_js’ );
wp_enqueue_script( ‘slimscroll_js’ );
[/php]
HTMLファイルへの書き方ですが、ダウンロードしたzipファイルの中にexamplesというフォルダがあります。その中に幾つもサンプルHTMLが入っていますので、用途に応じてコピペして使うと簡単です。

オプションの指定は以下のように記述します。
[code lang=”js”]
<script>
jQuery(document).ready(function() {
jQuery.fn.fullpage({
verticalCentered: true,
resize : true,
slidesColor : [‘#ccc’, ‘#fff’],
anchors:[‘firstSlide’, ‘secondSlide’],
scrollingSpeed: 700,
easing: ‘easeInQuart’,
menu: false,
navigation: false,
navigationPosition: ‘right’,
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: false,
css3: false,
paddingTop: 0,
paddingBottom: 0,

//events
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
});
});
</script>[/code]
オプションの種類に関してはこちらを参考にしてください。

https://github.com/alvarotrigo/fullPage.js#fullpagejs

scrolldeck

 

scrolldeck.js

 

先ほどのfullPage.jsと違ってスクロールしてもurlの後ろにid名がつきません。

ko.a laboratoryのサイトでもscrolldeckを使っていますが、例えばナビゲーションメニューのWORKをクリックして下にスクロールしてもurlは”http://koa-labo.com/”のままです。
fullPage.jsを使うとナビゲーションのWORKをクリックするとurlが”http://koa-labo.com/#work”となります。

また、もう一つの大きな違いはscrolldeckではパララックスも表現できるという点です。

シンプルなスライドのDEMO

ダイナミックなイメージスライドのDEMO

パララックス効果が表現できるDEMO

 

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

サイトトップからzipまたはtarファイルをダウンロードします。

スクリプトファイルを読み込みます。jQuery本体のほかに4つのスクリプトファイルが必要です。
[php] //スクリプトの読み込み
wp_register_script( ‘easing_js’, get_stylesheet_directory_uri() . ‘/library/js/jquery.easing.1.3.js’, array( ‘jquery’ ), ”, false );
wp_register_script( ‘scrolldeck_js’, get_stylesheet_directory_uri() . ‘/library/js/jquery.scrolldeck.js’, array( ‘jquery’ ), ”, false );
wp_register_script( ‘scrollorama_js’, get_stylesheet_directory_uri() . ‘/library/js/jquery.scrollorama.js’, array( ‘jquery’ ), ”, false );
wp_register_script( ‘scrollTo_js’, get_stylesheet_directory_uri() . ‘/library/js/jquery.scrollTo-1.4.3.1.min.js’, array( ‘jquery’ ), ”, false );

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

wp_enqueue_script( ‘easing_js’ );
wp_enqueue_script( ‘scrolldeck_js’ );
wp_enqueue_script( ‘scrollorama_js’ );
wp_enqueue_script( ‘scrollTo_js’ );
[/php]
HTMLはこんな感じです。
[html]<!– メニュー classに"nav-button"を指定する –>
<nav id="nav">
<ul>
<li><a class="nav-button" href="#slide1">slide1</a></li>
<li><a class="nav-button" href="#slide2">slide2</a></li>
</ul>
</nav>

<!– コンテンツ部分 classに"slide"を指定する –>
<div id="slide1" class="slide">
<p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p>
<p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p>

</div>
<div id="slide2" class="slide">

This slide will get be ’pinned‘ to the top of the screen until all the slide animation builds are complete.
<p class="animate-build" data-build="1">This paragraph will fade in (the default animation)</p>
<p class="animate-build" data-animation="space-in" data-build="2">This paragraph will fade in while its letter spacing contracts to normal.</p>

</div>
<!– スクリプト部分 –>
<script>
jQuery(document).ready(function() {
var deck = new $.scrolldeck({
buttons: ‘.nav-button’,
easing: ‘easeInOutExpo’
});
});
</script>[/html]
ダウンロードしたフォルダのdecksの中にサンプルソースが入っているのでオプションやその他の設定などはソースを参考にしてください。

「scrolldeckが動かない!」という場合にまず確認すべき点を伝授します!(何度かハマったので。)

それはもしかしたら・・

  1. ナビゲーションメニューに class=”nav-button”と記述されているのに、hrefで指定された要素がページ内に存在しない!と言っているのかもしれません
  2. それでもダメだったら・・jQuery本体のバージョンが合っていないかも

 

追記

前編でご紹介したSMINTですが、WordPressで使いやすくするためのカスタマイズに成功しました!色々と勉強にもなったので、いつかカスタマイズ方法についても記事にする予定です。