【jQuery】multiScroll.jsを使って簡単にコスメの商品ページを作ってみた（全解説）

multiScroll.js

multiScroll.jsというスクロール系jsプラグインの使ってコスメの商品ページ風のデモを作ってみました。デザイン性の高いプラグインなので少しの工夫でおしゃれなスクロールが作れます。今回は使い方とともにデザイン部分も含めてデモサイトの解説をしていきます。

multiScroll.jsとは
読み込み
- ダウンロード
- CDN
基本設定
デザインを作りこんでみる
サンプルデモ
multiScroll.jsの主なオプション
まとめ

multiScroll.jsとは

左右に分かれたエリアがそれぞれ上下からスクロールして表示されるjQueryのプラグインです。シングルページ作成などに向いています。

multiScroll.js公式サイト

読み込み

以下のようにjquery.multiscroll.min.css、jquery-3.5.1.min.js、jquery.easing.min.js、jquery.multiscroll.min.jsの4つを読み込みます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.min.js">

ダウンロード

GitHub（CodeボタンのDownload Zip）

CDN

以下からコピーできます。
jquery
jquery-easing
multiscroll.js

基本設定

HTML

ms-left、ms-rightのように左右のエリアごとに内容を記述します。
<div id="multiscroll"></div>内が効果対象となります。

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section section1">Some section1</div>
        <div class="ms-section section2">Some section2</div>
        <div class="ms-section section3">Some section3</div>
    </div><!-- ms-left -->
    <div class="ms-right">
        <div class="ms-section section1">Some section1</div>
        <div class="ms-section section2">Some section2</div>
        <div class="ms-section section3">Some section3</div>
    </div><!-- ms-right -->
</div>

js

上記で使用しているID（ #multiscroll ）を以下のようにjsで設定します。

<script>
$(document).ready(function() {
    $('#multiscroll').multiscroll({
    navigation:true
    });
});
</script>

See the Pen multiScroll.js demo1 by uhaha (@uhaha) on CodePen.

デザインを作りこんでみる

デザイン作成になります。

※一般的にはデザイン作成→コーディング、使用プラグイン決定、みないな流れですが今回はmultiScroll.jsを使うという想定でデザインに落とし込んでいきます。

デザイン前がこんな感じなので文字の抑揚と背景を整えてデザイン画像を作っていきます。

左側には右側の写真に基づいたグラデーションカラーを設定します。

この段階で以下のように頭の中でコーディングすることを想定しながらデザインすると自然と理に叶ったものができあがります。

cssのグラデーションジェネレーターやGoogleフォントを活用すれば時短できます。

サンプルデモ

コーディングしたものがこちらになります。

See the Pen multiScroll.js demo by uhaha (@uhaha) on CodePen.

multiScroll.jsの主なオプション

引数	概要
verticalCentered	垂直方向の中央揃えを設定します。
scrollingSpeed	スクロールのスピードを設定します。
sectionsColor	セクションごとの背景色を設定します。 ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000']
anchors	各セクションの URL に表示されるアンカーリンクを定義します。
easing	アニメーション効果を定義します。 jquery.easings.min.js または jQuery UI が必要です。
loopTop	最初のセクションで上にスクロールするときに、最後のセクションが表示されるかどうかを定義します。
loopBottom	最後のセクションで下にスクロールするときに、最初のセクションが表示されるかどうかを定義します。
normalScrollElements	クラスやIDを指定するとmultiScroll.jsのスクロールから除外されます。
scrollOverflow	内容のサイズが大きい場合に、セクションのスクロールバーを作成するかどうかを定義します。
touchSensitivity	次のセクションに移動するための長さを定義します。
menu	メニューを作成する際にtrueにします。aタグにdata-menuanchorを追加して、セクション内で設定されているアンカーリンクを紐づけて使用します。
navigation	true に設定すると、ナビゲーションバーが表示されます。
navigationPosition	ナビゲーションバーが表示される位置を定義します。左右どちらかに設定できます。
navigationTooltips	ナビゲーションバーが表示れている場合に、表示するツールチップを定義します。
responsiveWidth	ブラウザの幅が設定した値になると通常のサイトのようにスクロールします。
responsiveHeight	ブラウザの高さが設定した値になると通常のサイトのようにスクロールします。

記述例と初期値は以下のようになります。

$(document).ready(function() {
    $('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        easingcss3: 'ease-out',
        menu: false,
        sectionsColor: ["#000,#ccc,#ff0000],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null,
        scrollOverflow: false,
        scrollOverflowOptions: null,
        keyboardScrolling: true,
        touchSensitivity: 5,

        //responsive
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveExpand: false,

        // Custom selectors
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});