パララックス

指定した要素に、スクロールに連動する様々な視差効果（パララックス）モーションを実装できる関数。

HTMLのマークアップ

    <div class="sl-prx_down">
        //ここに中身をマークアップする
    </div>

    <script>
        sl_prx('sl-prx_down') ;
    </script>
</body>

指定要素（モーションをかけたいタグ）のclassに、使いたいデフォルト関数の（）内の文字列を記述しよう！

上記の例では、デフォルト関数「下に移動」を実装するために、指定要素のclassに「sl-prx_down」を記述しています。

  • 指定要素は<div>以外のタグも指定可能。
  • その他のclassとの併記も可能。（例：class="sample sl-prx_down")
  • 指定要素の中がさらに入れ子構造になっていても使用可能。
    <div class="sl-prx_down" data-sl_prx="0.4"></div>
    <div class="sl-prx_down" data-sl_prx="0.8"></div>

    <script>
        sl_prx('sl-prx_down' ,{
            ratio: 0.2  
        });
    </script>
</body>

{}の中に記述する「ratio」では全ての要素を、HTMLタグに記述する「data-sl_prx」では個別に移動率（※１）を設定可能

※１【移動率】スクロール1pxに対し、指定要素が何％の割合で移動するか（例：移動率0.5の場合、10pxスクロールしたときに指定要素は5px移動する）

  • HTMLタグに記述する「data-sl_prx」も、カスタマイズ項目の「ratio」も、どちらも「移動率」を指定する設定です。
  • ratioは同一のclass（sl-prx_***）が指定されている要素すべての移動率を一括で設定し、data-sl_prxは記述された要素のみの移動率を個別で設定します。
  • data-sl_prxはratioよりも優先されます。

専用関数 sl_prx()

デフォルト関数

たった１行のJSコードで実装完了！
すぐに使える！

  • 上に向かって移動

    Class

    sl-prx_up

    JS code

    sl_prx('sl-prx_up');
  • 下に向かって移動

    Class

    sl-prx_down

    JS code

    sl_prx('sl-prx_down');
  • 左に向かって移動

    Class

    sl-prx_left

    JS code

    sl_prx('sl-prx_left');
  • 右に向かって移動

    Class

    sl-prx_right

    JS code

    sl_prx('sl-prx_right');
  • 要素の中身が
    上に向かって移動

    Class

    sl-prx_inUp

    JS code

    sl_prx('sl-prx_inUp');
  • 要素の中身が
    下に向かって移動

    Class

    sl-prx_inDown

    JS code

    sl_prx('sl-prx_inDown');
  • 要素の中身が
    左に向かって移動

    Class

    sl-prx_inLeft

    JS code

    sl_prx('sl-prx_inLeft');
  • 要素の中身が
    右に向かって移動

    Class

    sl-prx_inRight

    JS code

    sl_prx('sl-prx_inRight');

カスタマイズ関数

簡単な追加設定で、
表現の幅がもっと広がる！

sl_inv('sl-prx_down' , {
    ratio : 0.2
});

パララックス：sl_prx()
カスタマイズ可能な設定

設定項目 機能 設定可能な値 デフォルト値 補足・ヒント
ratioスクロール1pxに対して、何％の割合で指定要素が移動するかを設定する0.1〜0.9（10%〜90%）0.5指定要素（HTMLタグ）に「data-sl_prx」が設定されている場合は、ratioの値よりもそちらが優先されます。
  • 設定項目の値が不適切な場合はデフォルト値が適用されます