multiScroll.jsの使い方をサンプルコード付きで解説!

multiScroll.jsとは画面を左右に分割して、左右別々にスクロールすることができるというプラグインです。簡単に動的なサイトを作るとこができます。今回はmultiScroll.jsの使い方をサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1multiScroll.jsとは?
  2. 2multiScroll.jsの導入方法
  3. 3multiScroll.jsの使い方
  4. 3.1実際にmultiSCroll.jsを使う
  5. 3.2multiSCroll.jpのオプション

multiScroll.jsとは?

multiScroll.jsとは画面を左右に分割して、左右別々にスクロールできるというjQueryのプラグインです。以下のサンプルコードのような動的なサイトを簡単に作るとこができます。

今回はこのmultiScroll.jsの使い方をサンプルコード付きで解説します。

multiScroll.jsの導入方法

まずはこちらのサイトでmultiScroll.jsをダウンロードしてください。

そのzipファイルを解凍後、自分のサイトにjquery.multiscroll.min.jsを読み込んでください。

またその後jquery.easings.min.jsも読み込んでください。そのファイルはjQueryのアニメーションについてのプラグインで、vendorsファイルの中に入っています。

最終的に</head>タグの直前は以下のような記述になります。

JSの読み込み

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="jquery.easings.min.js"></script>
<script src="jquery.multiscroll.min.js"></script>
<script src="multiscroll_set.js"></script> <!--独自のファイル-->

これで準備は完了です。

multiScroll.jsの使い方

それでは実際にmultiScroll.jsの使い方をサンプルコード付きで解説していきます。

multiScroll.jsには独自のクラスがあり、ms-leftクラス,ms-rightクラス,ms-sectoinクラスの3つがあります。

ms-leftクラス,ms-rightクラスは表示の左右の画面を分けるためのクラスです。

ms-sectoinクラスは子要素につけるクラスでブロックごとに、クラス名を付与してください。

そしてその後multiscroll_set.jsの中で以下のように記述します。

 

multiscroll

	$(function(){
		$('#id').multiscroll();
	});

これはmultiScroll.jsのmultiscrollメソッドを呼び出しています。

idは任意のidを使用できます。

 

実際にmultiSCroll.jsを使う

これまでで解説したクラス、メソッドを用いることで以下のサンプルコードのようなmultiSCroll.jsを実装できます。

サンプルコードを確認してください。

multiSCroll.jpのオプション

multiScroll.jsには様々な便利なメソッドがあり、これらを利用することで細かい表現もできるようになります。例えばsectionsColor関数はブロックごとに背景色を一括で指定することができ、CSSを省力化できます。
 

このようなオプションについては以下の記事で詳しく解説していますので、是非合わせてご覧ください。

あわせて読みたい
multiScroll.jsのオプションとその使い方を解説!のイメージ
multiScroll.jsのオプションとその使い方を解説!
multiScroll.jsとは画面を左右に分割して、左右別々にスクロールすることができるというプラグインです。この記事ではそのmultiScroll.jsのオプションについて解説していきます。より高度な実装をできるようになりましょう。
今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。