初心者でも分かりやすく作り変えやすいパララックスjQueryプラグインをご紹介します。

jQueryプラグイン［parlx.js］を使えば、パララックス効果を簡単に導入する事ができます。

ただし、Internet explorerには非対応ですのでご注意ください。

コピペしやすいようシンプルにまとめてありますのでどうぞお使いください。

まずjQueryと［parlx.js］を導入してからお使いください。

［parlx.js］は以下のリンク先から入手できます。

GitHub : https://github.com/JB1905/parlx.js

↓以下が実際のソースサンプルです。

▼html
background-imageのurlを入れ替えてお使いください。

    <section class="parallax" data-height="400px" style="height: 400px;">
        <div class="background" style="background-image: url(1.jpg); ">
        </div>
    </section>
    <section class="parallax" data-speed="0.1" data-height="55vh" style="height: 60vh;">
        <div class="background" style="background-image: url(2.jpg); ">
        </div>
    </section>
    <section class="parallax" data-mobile="false" style="height: 400px;">
        <div class="background" style="background-image: url(3.jpg);">
        </div>
    </section>

▼css

.parallax {
    position: relative;
    overflow: hidden;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.background {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0px;
    left: 50%;
    min-height: 400px;
    min-width: 100%;
    width: auto;
    transform: translate(-50%, -57.5px);
    background-position: center center;
}

▼jQuery

    <script>
        $('.parallax').Parlx({
            item: '.background',
            speed: '0.8'
        });
    </script>

オプション設定
用意されているオプションは「speed」「height」「mobile」の3つが用意されています。

speed 「0.3」が初期値
height 「400px」が初期値
mobile 「true」が初期値

独自データ属性で指定する場合

    <section class="parallax" data-speed="0.5" data-height="55vh" style="height: 60vh;">
        <div class="background" style="background-image: url(2.jpg); ">
        </div>
    </section>

jQueryで指定する場合

    <script>
        $('.parallax').Parlx({
            item: '.background',
            speed: '0.8'
        });
    </script>

今回、参考にさせていただいたのは、『 オンズ開発ブログ 』さんです。 ありがとうございます。

デモページは、こちら