インビュー

指定した要素が画面に入ったタイミングで、様々なモーションによって出現させる関数。

HTMLのマークアップ

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

    <script>
        sl_inv('sl-inv_up') ;
    </script>
</body>

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

上記の例では、デフォルト関数「下から上に向かってフェードイン」を実装するために、指定要素のclassに「sl-inv_up」を記述しています。

  • 指定要素は<div>以外のタグも指定可能。
  • その他のclassとの併記も可能。（例：class="sample sl-inv_up")
  • 指定要素の中がさらに入れ子構造になっていても使用可能。
    <div class="sl-inv_up">
    //ここに中身をマークアップする
    </div>

    <script>
        sl_inv('sl-inv_up' , {
            setpoint : 200 ,
            range : 120 
        }) ;
    </script>
</body>

{}の中に設定を記述して、モーションを細かく制御しよう！

上記の例では、「モーション発動位置」を画面下から200pxの位置に、指定要素が出現する際の「移動距離」を120pxに設定しています。

  • 設定項目を記述する順番に決まりはありません。

専用関数 sl_inv()

デフォルト関数

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

  • パッと出現

    Class

    sl-inv_flash

    JS code

    sl_inv('sl-inv_flash');
  • フェードイン

    Class

    sl-inv_fade

    JS code

    sl_inv('sl-inv_fade');
  • 下から上に向かって
    フェードイン

    Class

    sl-inv_up

    JS code

    sl_inv('sl-inv_up');
  • 上から下に向かって
    フェードイン

    Class

    sl-inv_down

    JS code

    sl_inv('sl-inv_down');
  • 右から左に向かって
    フェードイン

    Class

    sl-inv_left

    JS code

    sl_inv('sl-inv_left');
  • 左から右に向かって
    フェードイン

    Class

    sl-inv_right

    JS code

    sl_inv('sl-inv_right');
  • スケールアップしながら出現

    Class

    sl-inv_scale

    JS code

    sl_inv('sl-inv_scale');
  • バウンスしながら出現

    Class

    sl-inv_bownce

    JS code

    sl_inv('sl-inv_bownce');

カスタマイズ関数

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

sl_inv('sl-inv_up' , {
    setpoint : 150 ,
    duration : 0.6 ,
    range : 100 ,
    easing : 'linear'
});

インビュー：sl_inv()
カスタマイズ可能な設定

設定項目 機能 設定可能な値 デフォルト値 補足・ヒント
setpointモーションを発動する位置を任意の値にする0 〜 500（単位：px）100画面下を0pxとし、画面下から何pxの位置に指定要素が到達したときにモーションを発動するかを設定します。
durationモーションの稼働時間を任意の値にする0 〜 3（単位：s）0.4最大3秒の指定が可能ですが、UXの観点から必要以上に稼働時間を長くしないことを推奨します。
range指定要素の移動距離を任意の値にする0 〜 500（単位：px）40要素が出現するときの移動距離です。
easingモーションのイージングを任意の値にするCSSで設定可能な
easingの値		easeCSSのプロパティ「transition-timing-function」などで指定可能な値を設定することが可能です。
  • 変更が必要な設定項目のみ記述すればOK
  • 設定項目を記述する順番に決まりはありません
  • 各設定項目の値が不適切な場合はデフォルト値が適用されます