このページの本文へ

かっこいいプロモーションサイトが作れる multiScroll.js

2014年06月13日 11時00分更新

文●大竹孔明/まぼろし

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

multiScroll.js


 「multiScroll.js」 は、画面を左右に分割して別々にスクロールして見せられるjQueryプラグインです。最近流行の効果を簡単に実装でき、スクロールスピードの調整やイージングの設定、スクロールのループなどのカスタマイズもできます。

 multiScroll.jsはGoogle ChromeやFirefoxなどのモダンブラウザーと、Internet Explorer 8以降に対応しています。スマートフォン用ブラウザーでの動作は保証されていませんが、筆者の検証ではiOS 7.1.1でスムーズに動作していました。スマートフォンサイトの場合はターゲット端末で必ず検証してから利用しましょう。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、multiScroll.jsを配布ページからダウンロードします。ページ中央もしくは右下のDownloadボタンをクリックして保存します。

プラグイン配布ページの画像

プラグイン配布ページの画像

 multiScroll.js はGitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。

プラグイン配布ページの画像

プラグイン配布ページの画像

 利用するWebページの body の閉じタグ直前で、jQuery本体と「jquery.multiscroll.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.multiscroll.js">
</body>
//(中略) 

 ナビゲーションのスタイルなどが記述されている「jquery.multiscroll.css」を、head タグ内で読み込みます。


//(中略)
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css">
</head>
//(中略)

 イージングを設定してアニメーションに変化を付けたい場合は、「jquery.easings.js」も読み込んでおく必要があります。jquery.multiscroll.jsの前に読み込みましょう。


//(中略)
<script src="jquery.min.js"></script>
<script src="vendors/jquery.easings.min.js"></script> 
<script src="jquery.multiscroll.js">
</body>
//(中略)

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 jquery.multiscroll.js を読み込んだ後、multiscroll()メソッドを実行します。multiscroll ()メソッドは、使用したい要素をセレクターで指定し、.(ドット)繋ぎで指定します。下の例では「multiscroll」というclass名を指定しています。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.multiscroll.min.js"></script>
<script>
$(function(){
    $('#multiscroll').multiscroll();
});
</script>
//(中略)

 HTMLは以下のように指定します。

HTML


//(中略)
<div id="multiscroll">
// ここにスクロールさせる要素を記述
</div>
//(中略)

 画面右側でスクロールする要素には「.ms-right」、画面左側でスクロールする要素には「.ms-left」というclass名を付与します。その中に各ブロックに対してそれぞれ「.ms-section」というclass名を付与します。

HTML


//(中略)
<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
    </div>
    <div class="ms-right">
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
    </div>
</div>
//(中略)

 これで基本的な機能が実装できました。

step3 オプションを指定してカスタマイズする

 multiScroll.js には多くのオプションが用意されています。GitHub にも書かれていますので、使う前に確認しておきましょう。

 オプションは以下のようにmultiscroll({...})内に指定します。

JavaScript


//(中略)
$(function(){
    $('.multiscroll').multiscroll({
        // ここにオプションを指定する
        verticalCentered: false, // オプション指定の例
        scrollingSpeed: 1000
    });
});
//(中略)

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

sectionsColorオプション

 div.ms-sectionで囲んだ各セクションの背景色をsectionsColorオプションで指定できます。以下のようにセクションの順番に,(カンマ)区切りで指定します。


$('#multiscroll').multiscroll({
    sectionsColor: ['#f2f2f2''#4BBFC3''#7BAABE''whitesmoke''#000'],
});

anchorsオプション

 セクションごとに URL を変更し、パーマリンクを貼れるようにするには、anchorsオプションを利用します。左から1つめのセクションから最後のセクションまでの名前を,(カンマ)区切りで指定すると、#hogeといったハッシュ付きのURLになります。

 anchorsオプションで指定した名前はid名としても利用できなくなりますので、他の要素と重複しないユニークな名前を指定しましょう。


$('#multiscroll').multiscroll({
    anchors: ['first','second','third']
});

normalScrollElementsオプション

 特定の要素をスクロールアニメーションから除外する場合は、normalScrollElementsオプションを使います。除外対象の要素をセレクターに指定します。


$('.multiscroll').multiscroll({
    normalScrollElements: '#element1, .element2'
});

menuオプション

 セクションとリンクするナビゲーションメニューを表示するには、menuオプションを利用します。以下のようにanchrosオプションと組み合わせて指定します。

JavaScript


$('.multiscroll').multiscroll({
    anchors: ['firstPage''secondPage''thirdPage''fourthPage''lastPage'],
    menu: '#myMenu'
});

 実際のナビゲーションメニューは、以下のようなHTMLを記述して表示します。

HTML


<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

 ul 要素に対してid名や class名 を指定し、li 要素に対してカスタムdata属性「data-menuanchor」を使ってanchors オプションで指定した文字列を指定します。デフォルトで表示したいメニュー項目には 「.active」という class 名を付与します。a 要素の href に セクションの#を指定します。

normalScrollElementsオプションの設定例

normalScrollElementsオプションの設定例

navigationTooltipsオプション

 ページ右側に表示される小さい円のナビゲーションに、ツールチップを指定できます。以下のように指定します。


$('.multiscroll').multiscroll({
    navigationTooltips: ['firstSection''secondSection']
});

 ただし、日本語などのマルチバイト文字列の場合はツールチップが縦書きになってしまったり、文字列が長い場合に自動的に改行されてしまったりします。

navigationTooltipsオプションマルチバイト表示に注意

navigationTooltipsオプションマルチバイト表示に注意

 そこで、CSSで改行位置を制御する必要があります。ツールチップは 「.multiscroll-tooltip」という要素をJavaScriptで挿入して表示していますので、この「.multiscroll-tooltip」に対して 「white-space: nowrap;」 という CSS を指定します。

CSS


.multiscroll-tooltip {
white-space: nowrap;
}

navigationTooltipsオプションマルチバイトの設定例

navigationTooltipsオプションマルチバイトの設定例

その他オプション

 そのほかにも以下のようなオプションがあります。

オプション 説明 デフォルト値
verticalCentered セクション内のコンテンツを縦方向にセンタリングするかどうかを指定します true
scrollingSpeed セクションのスクロールにかかる時間をミリ秒で指定します 700ms
easing イージングを設定してスクロールの動きに変化を付けます。jquery.easing.js を読み込む必要があります easeInQuart
loopTop 「true」を指定すると最初のセクションで上に向かってスクロールしたときに、最後のセクションを表示します false
loopBottom 「ture」を指定すると最後のセクションで下に向かってスクロールした場合、最初のセクションを表示します false
css3 アニメーションに CSS3 の transform を利用します。ブラウザーが CSS3 をサポートしていない場合は、フォールバックとして、jQueryが使用されます false
paddingTop 固定のヘッダーを使用する場合にその領域分の padding-top を指定します 0
paddingBottom 固定のフッターを使用する場合にその領域分の padding-bottom を指定します 0
keyboardScrolling falseにすると、キーボードによるスクロールを禁止できます。 true
touchSensitivity スマートフォンなどのタッチデバイスでセクションをどの程度までスワイプしたらスクロールと判断するかをパーセンテージで指定します。不用意なスクロールを制限できます。 5 (%)
navigation true を指定すると、小さい円のナビゲーションを生成します。 false
navigationPosition 小さい円のナビゲーションの位置を指定します。left で左、right で右側に表示されます none

メソッドやコールバック

 「multiScroll.js」はメソッドやコールバックも多く用意されています。解説は省きますが、自前のスクリプトとの連携なども簡単にできますので、 GitHub に目を通しておきましょう。


 「multiScroll.js」の便利なところは、Macのトラックパッドによるスクロールでも行き過ぎない点です。簡単に実装できなそうな動作ですが、Macだとスクロールが行き過ぎてしまうものが多く、multiScroll.jsを利用することでMacユーザーに与えるストレスは軽減されるでしょう。

 multiscroll.jsのような演出は最近流行っているので、プロモーションサイトやキャンペーンサイトで、クライアントから求められることがあるかもしれません。そういった場合に手軽に導入できる点、汎用性が高い点、スクロール量への配慮など、この手のプラグインでは現状で一番使いやすいでしょう。

 ただし、アクセシビリティの観点では音声読み上げブラウザーで正しく読み上げられず、HTMLの文書構造が破綻してしまう問題もあります。デメリットも考慮したうえで利用しましょう。


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く