jQuery

【jQuery】軽量でシンプルで使いやすいパララックスjQueryプラグインjQuery Slim Parallax

October 22, 2018
jQuery slim parallax

jQuery Slim Parallaxは軽量でシンプルで使いやすいパララックスjQueryプラグイン。

Use

スクリプトファイルをhtmlに追加します。

    <script src="js/jquery.js"></script>
    <script src="js/slimparallax.js"></script>
    <script src="js/script.js"></script>

構造を作成

    <div class="slim-prx slim-prx-one">
        <div class="container">
            content
        </div>
    </div>

速度を加えることができます。許容値は2〜40。

    <div class="slim-prx slim-prx-one" data-slim-prx-speed="10">
        <div class="container">
            content
        </div>
    </div>

背景イメージを設定するセクションにCSSを追加。

    .slim-prx{                            
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    
    .slim-prx-one{
        background-image: url("../img/bg-one.jpg");
    }

    .slim-prx-one{
        background-image: url("../img/bg-two.jpg");
    }

スクリプトを追加。グローバル速度を設定

    $('.slim-prx').slim_parallax({
        speed: 10
    }); 

必要な最小限のスクリプト

$('.slim-prx').slim_parallax();