multiScroll.jsのオプションとその使い方を解説！
multiScroll.jsとは画面を左右に分割して、左右別々にスクロールすることができるというプラグインです。この記事ではそのmultiScroll.jsのオプションについて解説していきます。より高度な実装をできるようになりましょう。
multiScroll.jsのオプションとその使い方
multiScroll.jsには様々な便利はオプションがあります。オプションを使うことでより高度な実装をすることができ、サイトの見栄えが一層よくなります。
今回はそのオプションについてそれぞれ解説します。
ぜひ実際に使ってみてください。
multiScroll.jsの基本的な使い方は以下の記事で解説しました。
まだご覧でない方はこちらの記事からご覧ください。
sectionsColorオプション
最初に解説するのはsectionsColorオプションです。
これはms-sectionクラスで囲んだ各セクションの背景色を別々に指定できるオプションです。
実際の使い方を以下のサンプルコードで確認してください。
normalScrollElementsオプション
次に解説するのはnormalScrollElementsオプションです。
このオプションは特定の要素にmultiScroll.jsのスクロールが動作しないように除外するオプションです。
対象の要素をセレクターから除外して使用します。
normalScrollElements
$(".class").multiscroll({
normalScrollElements:"指定するクラスやID,指定するクラスやID"
});loopTop/loopBottomオプション
次に紹介するのはloopTopオプションとloopBottomオプションです。この2つのオプションは最後と最初のセクションを繋げる効果を持ちます。
例えば、loopTopオプションは最初のセクションで上向きのスクロールをすると最後のページを表示します。
逆にloopBottomオプションは最後のページで下向きにスクロールすると最初のセクションに戻ります。
両方のオプションとも初期値はfalseとなっていますので、trueを設定してください。
実際に以下のサンプルコードで、セクションがしっかりと繋がっていることを確認してください。
scrollingSpeedオプション
scrollingSpeedオプションはセクションのスクロールにかかる時間を調節するオプションです。スクロールにかかる時間をミリ秒単位で指定できます。
まとめ
今回はmultiScroll.jsのオプションを数種類紹介しました。もちろん紹介したオプション以外にも便利なオプションがたくさんあるので、様々なオプションに触れてみてmultiScroll.jsをより使いこなしてください。
