(cache) 【jQuery】垂直に2分割にした画面をそれぞれ上下反対方向にスクロールさせる-multiScroll.jsの使い方-

2015年8月5日

Web制作

【jQuery】垂直に2分割にした画面をそれぞれ上下反対方向にスクロールさせる-multiScroll.jsの使い方-

タイトルに書いているように垂直に2分割された画面を、それぞれ反対の向きにスクロールさせるプラグインです。

multiScroll

なんのこっちゃという方はとりあえずデモをどうぞ。

デモサイト

面白いスクロールの動きをします。

1,2年前にどこかのサイトで使われていた動きですが、
ひさびさ目について使ってみました。

実装も簡単です。

ダウンロード

公式サイトのダウンロードボタンよりファイル一式をダウンロードしてください。

multiscroll

読み込み

ダウンロードしたZipファイルを解凍し、
jquery.multiscroll.css、jquery.multiscroll.min.jsを読み込みます。

jquery.easings.min.jsは読み込んでおくと、オプションで動き方を指定できます。

<link rel="stylesheet" href="jquery.multiscroll.css">
<script src="jquery.easings.min.js"></script>
<script src="jquery.multiscroll.min.js"></script>

HTML

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

<div id="myContainer">
	<div class="ms-left">
		<div class="ms-section" id="left1">
			<h1>Left 1</h1>
			<p>テストテストテスト</p>
		</div>
		<div class="ms-section" id="left2">
			<h1>Left 2 </h1>
		</div>
		<div class="ms-section" id="left3">
			<h1>Left 3</h1>
		</div>
	</div>

	<div class="ms-right">
		<div class="ms-section" id="right1">
			<h1>Right 1</h1>
		</div>
		<div class="ms-section" id="right2">
			<h1>Right 2</h1>
			<p>テストテストテスト</p>
		</div>
		<div class="ms-section" id="right3">
			<h1>Right 3</h1>
		</div>
	</div>
</div>

sectionの数を増やしたい場合は、
class=”ms-section”のdivを左右の数を揃えて増やすと大丈夫です。

jQuery

jQueryに以下を追加します。

$('#myContainer').multiscroll();

オプションについては後述で。

CSS

CSSについては特に決まりはありません。

ただ何も指定しないと真っ白なので、HTMLのタグに振られているclassやidを利用して、背景をつけたりします。

オプション

オプションも豊富に用意されています。

$('#myContainer').multiscroll({
  // 各セクションの背景色を指定できます。
  sectionsColor: ['#E67168', '#A1B91D', '#1570A6'],
  // idでアンカーを指定できます。
  anchors: ['first','second','third'],
  // スクロールのスピードを指定できます。
  scrollingSpeed: 500,
  // tureにすると1番目から最後へ遷移できます。
  loopTop: "false",
  // tureにすると最後から1番目へ遷移できます。
  loopBottom: "false",
  // tureにすると円形の小さなナビゲーションが追加されます。
  navigation: "ture",
  // navigationで表示させた小さな円の位置を指定します。
  navigationPosition: "left",
  // スマートフォンなどでどれぐらいスワイプしたらスクロールするかを指定できます。
  touchSensitivity: "5%"
});

他にもGithubにいろいろのっています。

Github

さいごに

簡単に実装できて、すごくインパクトがあるスクロールの動き。

変わったことがしたい時にぜひ

記事一覧へ

Pocket

Snaplog