multiScroll.jsの使い方をサンプルコード付きで解説！
multiScroll.jsとは画面を左右に分割して、左右別々にスクロールすることができるというプラグインです。簡単に動的なサイトを作るとこができます。今回はmultiScroll.jsの使い方をサンプルコード付きで解説します。
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を省力化できます。
このようなオプションについては以下の記事で詳しく解説していますので、是非合わせてご覧ください。
