Webデザインやガジェット、格安SIMの情報ブログ

WEB制作

【jQuery】最近流行りの二分割レイアウトが簡単に実装出来るプラグイン「multiScroll.js」

  • ライター：

最近流行っている画面を半分に分けてスクロールするレイアウトが簡単に実装出来るjQueryプラグインを発見しました。自分の備忘録を兼ねてまとめてみます。

動画で動きを撮影されている方がいらっしゃったのでご紹介いたします。

  • ※問題があるようであれば至急削除いたしますのでお手数ですがご連絡下さい。

このように左右で上下逆向きのスクロールをします。パララックスとはまた違った面白い動きですね！

※本ページは広告・アフィリエイトプログラムにより収益を得ています。

スポンサーリンク
目次で流し読みする ･*･:≡(　ε:)
  1. 1.jQueryプラグインのダウンロード
  2. 2.基本
    1. 2-1.jQuery
    2. 2-2.HTML
    3. 2-3.CSS
  3. 3.背景色追加
    1. 3-1.jQuery
  4. 4.ヘッダーナビゲーション追加
    1. 4-1.jQuery
  5. 5.ナビゲーションツールチップ追加
    1. 5-1.jQuery
    2. 5-2.CSS
  6. 6.easing・スピード変更
    1. 6-1.jQuery
  7. 7.ループスクロール
    1. 7-1.jQuery
  8. 8.CSS3アニメーション
    1. 8-1.jQuery
  9. 9.キーボードスクロール無効
    1. 9-1.jQuery
  10. 10.スマートフォンスワイプ判定距離変更
    1. 10-1.jQuery
  11. 11.全指定
    1. 11-1.jQuery
    2. 11-2.HTML
    3. 11-3.CSS
  12. 12.まとめ
    1. 12-1.参考記事

jQueryプラグインのダウンロード

公式ページよりプラグインをダウンロードします。

multiscroll.js – split multi-scrolling pages plugin

または以下のGitHubページ右下の「Download ZIP」ボタンからダウンロードできます。

alvarotrigo/multiscroll.js · GitHub

基本

基本的な使い方です。jQuery本体とjquery.multiscroll.min.jsを</body>直前で読み込み、以下のように記述します。

.ms-leftが左側に表示されるコンテンツ。.ms-rightが右側に表示されるコンテンツです。

jQuery


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

HTML


<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section">セクション1（左）</div>
		<div class="ms-section">セクション2（左）</div>
		<div class="ms-section">セクション3（左）</div>
	</div>
	<div class="ms-right">
		<div class="ms-section">セクション1（右）</div>
		<div class="ms-section">セクション2（右）</div>
		<div class="ms-section">セクション3（右）</div>
	</div>
</div>

CSS


.ms-section {
	text-align:center;
}
  • ※リセットCSSは省略しております。

背景色追加

背景色の追加もプラグインのオプションで容易に出来ます。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'] // セクションごとの背景色
	});
});
</script>

ヘッダーナビゲーション追加

2014-06-16_191208

固定したナビゲーションを設置するとより使いやすくなります。
「data-menuanchor=”hoge”」とアンカーリンクでページ内リンクを設置します。class=”active”は自動的に移動しますので、CSSで適宜調整して下さい。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first','second','third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
	});
});
</script>


<nav id="nav">
	<ul class="clearfix">
		<li data-menuanchor="first" class="active"><a href="#first">セクション01</a></li>
		<li data-menuanchor="second"><a href="#second">セクション02</a></li>
		<li data-menuanchor="third"><a href="#third">セクション03</a></li>
	</ul>
</nav>


/* ナビゲーション */
#nav {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
#nav li {
	float:left;
	width:33.333%;
	text-align:center;
	border-bottom:1px solid rgba(0,0,0,0.1);
}
#nav li a {
	display:block;
	padding:15px;
	color:#fff;
	text-decoration:none;
	text-shadow:1px 1px 0 rgba(0,0,0,0.1);
	background:rgba(0,0,0,0.1);
	border-left:1px solid rgba(0,0,0,0.1);
	border-right:1px solid rgba(255,255,255,0.2);
}
#nav li.active a {
	background:rgba(255,255,255,0.3);
}

ナビゲーションツールチップ追加

2014-06-16_191045

ナビゲーションツールチップを追加すると、このような●のナビゲーションが表示されます。マウスオーバーするとツールチップが表示されます。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first', 'second', 'third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
		navigation: true, // 右のナビゲーションの有効化
		navigationPosition: 'right', // ナビゲーションの位置
		navigationTooltips: ['セクション1', 'セクション2', 'セクション3'] // ナビゲーションのツールチップ
	});
});
</script>

CSS


/* ツールチップ */
.multiscroll-tooltip {
	white-space: nowrap;
}

ツールチップは日本語だと文字が縦書きになってしまうので、CSSで横書きになるように調整します。

easing・スピード変更

easingの変更やスピード変更も自由に行うことが出来ます。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first', 'second', 'third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
		navigation: true, // 右のナビゲーションの有効化
		navigationPosition: 'right', // ナビゲーションの位置
		navigationTooltips: ['セクション1', 'セクション2', 'セクション3'], // ナビゲーションのツールチップ
		easing: 'easeInOutBack', // イージング（jquery.easings.min.jsを読み込む）
		scrollingSpeed: 500 // イージングのスピード
	});
});
</script>

ループスクロール

ループスクロールを有効にすると一番上または下でスクロールすると最初、最後にスクロールするようになります。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first', 'second', 'third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
		navigation: true, // 右のナビゲーションの有効化
		navigationPosition: 'right', // ナビゲーションの位置
		navigationTooltips: ['セクション1', 'セクション2', 'セクション3'], // ナビゲーションのツールチップ
		loopTop: true, //「true」にすると最初のセクションから上にスクロールした時に、最後のセクションに移動するようになる。
		loopBottom: true //「true」にすると最後のセクションから下にスクロールした時に、最初のセクションに移動するようになる。
	});
});
</script>

CSS3アニメーション

オプションを「true」にするとCSS3のtransformでアニメーションします。非対応ブラウザの場合、jQueryでのアニメーションとなります。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first', 'second', 'third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
		navigation: true, // 右のナビゲーションの有効化
		navigationPosition: 'right', // ナビゲーションの位置
		navigationTooltips: ['セクション1', 'セクション2', 'セクション3'], // ナビゲーションのツールチップ
		css3: true, //「true」にするとCSS3のtransformでアニメーションします。非対応ブラウザはjQueryでのアニメーションになる。
	});
});
</script>

キーボードスクロール無効

キーボードでのスクロールを無効化します。（デフォルトでは有効）

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first', 'second', 'third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
		navigation: true, // 右のナビゲーションの有効化
		navigationPosition: 'right', // ナビゲーションの位置
		navigationTooltips: ['セクション1', 'セクション2', 'セクション3'], // ナビゲーションのツールチップ
		keyboardScrolling: false // キーボードによるスクロールを有効にする（falseで無効）
	});
});
</script>

スマートフォンスワイプ判定距離変更

スマートフォンのスワイプ判定になる距離を%で指定することが出来ます。あまりにも短いとすぐにスワイプとして判定されてしまうので、実機で試してみて最適の長さを指定して下さい。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first', 'second', 'third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
		navigation: true, // 右のナビゲーションの有効化
		navigationPosition: 'right', // ナビゲーションの位置
		navigationTooltips: ['セクション1', 'セクション2', 'セクション3'], // ナビゲーションのツールチップ
		touchSensitivity: 10 // スマートフォンなどのタッチデバイスで、どの程度までスワイプしたらスクロールするか調整できる。（%）
	});
});
</script>

全指定

先ほどまでのオプションを全て指定するとこのようになります。

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.multiscroll').multiscroll({
	// ここにオプションを指定する
		sectionsColor: ['#ffc045', '#4BBFC3', '#1ABC9C'], // セクションごとの背景色
		anchors: ['first', 'second', 'third'], // アンカーリンクの設定
		menu: '#nav', // メニューの親要素
		paddingTop: 50, // 固定ヘッダー分の上paddingを取ることが出来ます。
		paddingBottom: 0, // 固定フッター分の下paddingを取ることが出来ます。
		navigation: true, // 右のナビゲーションの有効化
		navigationPosition: 'right', // ナビゲーションの位置
		navigationTooltips: ['セクション1', 'セクション2', 'セクション3'], // ナビゲーションのツールチップ
		easing: 'easeInOutBack', // イージング（jquery.easings.min.jsを読み込む）
		scrollingSpeed: 500, // イージングのスピード
		loopTop: true, //「true」にすると最初のセクションから上にスクロールした時に、最後のセクションに移動するようになる。
		loopBottom: true, //「true」にすると最後のセクションから下にスクロールした時に、最初のセクションに移動するようになる。
		css3: true, //「true」にするとCSSのtransformでアニメーションします。非対応ブラウザはjQueryでのアニメーションになる。
		keyboardScrolling: false, // キーボードによるスクロールを有効にする（falseで無効）
		touchSensitivity: 10 // スマートフォンなどのタッチデバイスで、どの程度までスワイプしたらスクロールするか調整できる。（%）
	});
});
</script>

HTML


<nav id="nav">
	<ul class="clearfix">
		<li data-menuanchor="first" class="active"><a href="#first">セクション01</a></li>
		<li data-menuanchor="second"><a href="#second">セクション02</a></li>
		<li data-menuanchor="third"><a href="#third">セクション03</a></li>
	</ul>
</nav>

<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section">セクション1（左）</div>
		<div class="ms-section">セクション2（左）</div>
		<div class="ms-section">セクション3（左）</div>
	</div>
	<div class="ms-right">
		<div class="ms-section">セクション1（右）</div>
		<div class="ms-section">セクション2（右）</div>
		<div class="ms-section">セクション3（右）</div>
	</div>
</div>

CSS


@charset "UTF-8";

.ms-section {
	text-align:center;
}

/* ナビゲーション */
#nav {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
#nav li {
	float:left;
	width:33.333%;
	text-align:center;
	border-bottom:1px solid rgba(0,0,0,0.1);
}
#nav li a {
	display:block;
	padding:15px;
	color:#fff;
	text-decoration:none;
	text-shadow:1px 1px 0 rgba(0,0,0,0.1);
	background:rgba(0,0,0,0.1);
	border-left:1px solid rgba(0,0,0,0.1);
	border-right:1px solid rgba(255,255,255,0.2);
}
#nav li.active a {
	background:rgba(255,255,255,0.3);
}

/* ツールチップ */
.multiscroll-tooltip {
	white-space: nowrap;
}

まとめ

久しぶりに面白い動きのウェブサイトを見つけてテンション上がりました！ｗ
前にもどこかの海外のサイトで見たことがあったのですが、どうやって動いているのかさっぱりわかりませんでした。
いずれ放置しているポートフォリオサイトにでも実装してみようと思います。

参考記事

Tag:

トップページから他の記事を探す

コメントを残す

Related Post - 関連記事

WordPressでpjaxを使ってスムーズにページ遷移をしてみよう

【備忘録】スマホサイトのコーディング例

WordPressをロリポップ！からMixHostへ移転しました。月額518円でSSL対応まで可能な超高速レンタルサーバー

【備忘録】WordPressに「Twitter Cards」を設定してみる

ブログのテーマをリニューアル！これまでよりマテリアルデザインっぽくなりました

【WordPress】飲食店や宿の情報をAPIから自動取得！Locketsプラグインの設定方法を解説

スマホサイトをコーディングする前に確認しておく7つのこと

【jQuery】フッターの位置で固定するページトップへ戻る

WEBサイトにプッシュ通知が付けられるWEBサービス「bpush」を試してみる

スマホサイトでLINE風の幅可変ページを作成する
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。