今回はJavaScriptのmultiscrollプラグインを使用して、サイトにかっこいい動きをつけてみました。デモページはこちらです。
スクロールすることで、左右分かれてページが動きます。

デモページは、こちら

さっそく使い方をご紹介します。使用したプラグインは「multiscroll.js」を使用しました。下記ページでダウンロードができます。

multiscroll.js

ダウンロードした圧縮ファイルを解凍し、「jquery.multiscroll.min.js」を読み込むようにhtmlへ設定します。
また、今回は「Jquery」とアニメーション拡張プラグインである、「jquery.easing.min.js」も使用していますので、併せて設定してください。

▼html・・・headタグ内に記載

<!-- JQuery   -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- multiscroll.js   -->
<script src="js/jquery.multiscroll.min.js"></script>
<!-- easingプラグイン   -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- 用意するjsファイル   -->
<script src="js/multiscroll_set.js"></script>

HTMLでスライドする枠を設定します。
注意する点は「ms-left」「ms-right」「ms-section」のクラスはプラグイン内でクラス名を直接指定されているので、この名前をそのまま使用してください。IDの「multiscroll」は名前を変更しても大丈夫です。

▼html

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section"><h1>Left Sec1</h1></div>
        <div class="ms-section"><h1>Left Sec2</h1></div>
        <div class="ms-section"><h1>Left Sec3</h1></div>
    </div>
    <div class="ms-right">
        <div class="ms-section"><h1>Right Sec1</h1></div>
        <div class="ms-section"><h1>Right Sec2</h1></div>
        <div class="ms-section"><h1>Right Sec3</h1></div>
    </div>
</div>

今回CSSはh1タグを上下左右中央に配置し、フォントサイズを変更しました。

▼css

.ms-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ms-section h1{
    font-size: 4rem;
}

JavaScriptで#multiscrollに対し、multiscroll関数を呼び出してオプションを設定しています。
関数呼び出しのみでも動きますが、背景色もオプションで設定しているため、今回のデモではオプションの設定をしています。

詳しいオプションの設定はこちら

▼JavaScript [multiscroll_set.js]

$(function(){
    $('#multiscroll').multiscroll({
        loopTop: true,
        loopBottom: true,
        verticalCentered: false,
        sectionsColor: ['#FFB300', '#4BBFC3', '#F3D4E4'],
        scrollingSpeed: 800
    });
});
    

このプラグインを上手く利用してサイトをかっこよく仕上げてみてはいかがでしょうか。
ぜひ試してみてください。

今回の記事やデモページ作成にあたり
かっこいいプロモーションサイトが作れる multiScroll.jsさんのページを参考にさせていただきました。
ありがとうございます。