分割画面が上下から現れるjQueryプラグイン『multiscroll.js』の使い方

今回は画面を左右二分割して上下からカッコよく現れるjQueryプラグイン『multiscroll.js』を紹介させていただきます。

このmultiscroll.jsがどういうプラグインなのかまず知って頂くために、下の公式ページをご覧ください。

multiscroll.js 公式ページ

いかがでしょう?サイトの構造を考えるのに少し頭を悩まされることはさておき、とにかくインパクトがある演出をWEBページに実装したいという時はmultiscroll.jsが一つの選択肢になるのではないでしょうか。

それでは早速multiscroll.jsの使い方を見ていきましょう。

基礎的なjQueryの使い方やプラグインの実装方法がわからない方に関しましては、まず先に[初心者向け] jQueryとは?プラグインの導入方法を実践解説の記事を読んでjQueryの基礎を学んでおきましょう。

『multiscroll.js』の設定方法

まずは公式サイトかGithubからmultiscroll.jsの必要なデータをダウンロードしてください。

multiscroll.js 公式ページ

[Github] multiscroll.js

そしてデモサイトのようなアニメーションを実装するにはeasing.jsのデータも必要になるので、こちらもダウンロードしてください。

[Github] jquery.easing

まずはjQueryプラグインを利用するための準備を整えましょう。下のHTMLのようにjQueryのCDN(3行目)を読み込んだ上でmultiscroll.jsデータの中にあるjsファイル(5行目)とcssファイル(2行目)、またjquery.easingのjsデータ(4行目)を読み込み、最後に実行スクリプト(6行目~10行目)を記述してください。

jQueryの記述箇所はheadタグ内でなくてもbody終了タグ直前などでも大丈夫なのですが、mutiscroll.js、easing.js、実行スクリプトの読み込みはjQueryのCDNより後に記述してください

<head>
	<link rel="stylesheet" type="text/css" href="css/jquery.multiscroll.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.js"></script>
	<script type="text/javascript" src="js/jquery.multiscroll.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		$('#multiscroll').multiscroll();
	});
	</script>
</head>

データの読み込みができればHTMLに下記のような記述をしてください。class名やid名は変更しないでください

<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section">左<br>第一セクション</div>
		<div class="ms-section">左<br>第二セクション</div>
		<div class="ms-section">左<br>第三セクション</div>
	</div>
	<div class="ms-right">
		<div class="ms-section">右<br>第一セクション</div>
		<div class="ms-section">右<br>第二セクション</div>
		<div class="ms-section">右<br>第三セクション</div>
	</div>
</div>

ここまで出来れば下のデモサイトのようにとりあえずmultiscroll.jsの演出が実装されたページが出来上がると思います。もし同じようにコードを書いても読み込みができない場合は、jsファイルやcssファイルのディレクトリ名が合っているか確認してください。

とりあえずmultiscroll.jsを読み込んだだけのデモサイト

ここからどのようにページ作成を進めるかと言うと、非常に面倒な話ですが左右に分割されたブロックをそれぞれ作るということになります。。

  • 左の第一セクション作成
  • 右の第一セクション作成
  • 左の第二セクション作成
  • 右の第二セクション作成
  • 左の第三セクション作成
  • 右の第三セクション作成

このような流れで作成していくのが一般的になるかと思います。一つのページを作るのに左右二つのページを作成しないといけない感じになるのでなかなか苦労するかもしれませんが、そこはカッコいい演出をするために頑張ってみてください。ちなみにセクションの数はいくつでも増やすことができます。

multiscroll.jsのオプション機能

multiscroll.jsには様々なオプション機能があります。実行タグ部分に下記のような記述を追加すると、それに応じた機能を追加することができます。

$(document).ready(function() {
	$('#multiscroll').multiscroll({
		verticalCentered : true,
		// falseにすると要素の上下中央揃えが解除されます。

		scrollingSpeed: 700,
		// スクロールする際のスピードをミリ秒単位で調整できます。

		easing: 'easeInQuart',
		// スクロールした際にセクションの動き方を変えることができます。

		menu: false,
		// anchorsオプションと併用することで各セクションへ一発でジャンプできるリンクを作成できます。

		sectionsColor: ['red', '#4EFFDC', 'rgba(100,255,100,1)'],
		// セクションの背景色を上から順にコンマ(,)区切りで指定できます。デフォルトは何の色も付いていません。

		navigation: true,
		// trueにすると現在のセクション位置がわかるナビゲーションが生成されます。

		navigationPosition: 'right',
		// 生成されたナビゲーションの位置を指定します。

		loopBottom: false,
		// 最後のセクションから下へスクロールすると最初のセクションへループします。

		loopTop: false,
		// 最初のセクションから上へスクロールすると最後のセクションへループします。

		css3: false,
		// trueにするとCSS3でスクロールアニメーションを実装します。サイトスピードは上がりますが動きが変わります。

		paddingTop: 0,
		// 全てのセクションにおいて上部にパディングを一括指定します。

		paddingBottom: 0,
		// 全てのセクションにおいて下部にパディングを一括指定します。

		normalScrollElements: null,
		// セクション内にスクロールが必要な要素(マップなど)がある場合にスクロールでスライドを連動させない。

		keyboardScrolling: true,
		// falseにするとキーボードによるスクロールを解除できる。(スペースキーや上下キーでスクロール)

		touchSensitivity: 5,
		// スマホやタブレットでどれくらいのスワイプ量でスクロールが実行されるか調性できます。

		sectionSelector: '.ms-section',
		// 各セクションのdivに付けられているクラス名を自由に変えることができる。

		leftSelector: '.ms-left',
		// 左側のセクションを包括しているdivのクラス名を自由に変えることができる。

		rightSelector: '.ms-right',
		// 右側のセクションを包括しているdivのクラス名を自由に変えることができる。
	});
});

背景に画像を使うには

multiscroll.jsを使うと左側のセクションと右側のセクションを分けて作成しなければいけない為背景に画像を使うことはできないと思われるかもしれませんが、背景画像を左右別々に作成して上手く結合させることで一つの背景のように見せることは可能です。

背景を結合させたデモサイト

まずは下のように背景にしたい画像を真ん中で一刀両断して二つの画像にしてください。


そしてそれぞれの画像を左右のセクションに合わせて背景を指定するのですが、普通に背景画像として入れると画面サイズに応じて背景が動いてしまいずれるので上手くいきません。

左のセクションには背景画像を右寄せで固定し、右のセクションには背景画像を左寄せで固定することによって背景画像が左右でぴったりとくっついてくれます。後は好みに応じてbackground-sizeプロパティで背景画像の大きさなどを調整すれば良いかと思います。

<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section back-l1"></div>
	</div>
	<div class="ms-right">
		<div class="ms-section back-r1"></div>
	</div>
</div>
.back-l1{
	background: url('img/back01-left.png');
	background-size:cover;
	background-position: right; /* 背景画像を右に寄せる */
}

.back-r1{
	background: url('img/back01-right.png');
	background-size:cover;
	background-position: left; /* 背景画像を左に寄せる */
}

このようにCSSを付ければ背景画像を使うこともできますので是非試してみてください。

まとめ

今回は分割された画面が上下から現れるjQueryプラグイン『multiscroll.js』を紹介させていただきましたがいかがでしたでしょうか?

このプラグインはウェブサイトに強力なインパクトを与えることができますが、左右で別々のページ作成をしなければいけない分、サイト製作において自由度が少し下がってしまうのが欠点です。

左右を上手く分けて商品やサービスを比較したりする場合はより効果的に使えるかもしれませんので是非試してみてください。

追記

2018年4月24日現在

iPhoneでmultiscroll.jsで作られたサイトを閲覧すると、スクロール時にエラーが発生する事象を確認しました。恐らくアップデートに伴う一時的なエラーかと思いますが、どのタイミングのアップロードが原因で復旧の見込みについても現在調べております。わかり次第こちらから追記させていただきます。