レイアウトを二分割してスライドさせるプラグイン

2016.02.25　Posted by Coding_team

Webプログラミング

こんにちは。

ウェブラボ技術メモです。

今回は少し動きのあるWebサイトで使えそうなプラグインをご紹介します。

どんなプラグインか、説明するより見て操作してみるのが一番でしょう。

ということで、まずはデモをご覧ください。

レイアウトが左右に分割され、スクロールすると別方向にコンテンツがスライドしていますね。

何か対比したいものを左右に並べても良いでしょうし、1つのコンテンツでも画像と文章で分けるなど、色々な見せ方ができると思います。

ページ上部と右側にナビゲーションがついているので、現在地も把握しやすいですね。

では早速実装してみましょう。

プラグインは下記よりダウンロードしてください。

・GitHub

https://github.com/alvarotrigo/multiscroll.js

まずは下記のようにJquery本体と一緒にプラグインのjsとcssを読み込ませます。

今回は一緒にjquery.easings.min.jsも読み込ませましょう。こちらのjsはイージング、つまり単調な動きだけでなく、加速や減速など動きに強弱のついたエフェクト
処理をつけるためのものです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="js/jquery.easings.min.js"></script><script src="js/printThis.js"></script><script type="text/javascript">// <![CDATA[
	$(document).ready(function() {
		$('#myContainer').multiscroll({
           	// ここからオプションを指定する
           	sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],  //オプションで背景色を指定できます
           	anchors: ['first', 'second', 'third'],  //ナビゲーションのテキストを変更できます
           	menu: '#menu',
           	navigation: true,  // 右のナビゲーションの有効化
           	navigationTooltips: ['One', 'Two', 'Three'],  //右側のナビゲーションにテキストを表示させます
           	loopBottom: true,  //「true」にすると最初のセクションから上にスクロールした時に、最後のセクションに移動するようになる。
           	loopTop: true
		});
	});
// ]]></script>