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オプションの設定例
navigationTooltipsオプション
ページ右側に表示される小さい円のナビゲーションに、ツールチップを指定できます。以下のように指定します。
$('.multiscroll').multiscroll({
navigationTooltips: ['firstSection', 'secondSection']
});
ただし、日本語などのマルチバイト文字列の場合はツールチップが縦書きになってしまったり、文字列が長い場合に自動的に改行されてしまったりします。
navigationTooltipsオプションマルチバイト表示に注意
そこで、CSSで改行位置を制御する必要があります。ツールチップは 「.multiscroll-tooltip」という要素をJavaScriptで挿入して表示していますので、この「.multiscroll-tooltip」に対して 「white-space: nowrap;」 という CSS を指定します。
CSS
.multiscroll-tooltip {
white-space: nowrap;
}
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の文書構造が破綻してしまう問題もあります。デメリットも考慮したうえで利用しましょう。
