ブラインド

指定した要素の出現時に、様々なパターンのブラインドモーションを発動させる関数。

HTMLのマークアップ

    <span class="sl-bld_flash">
        //ここに中身を入れる
    </span>

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

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

上記の例では、デフォルト関数「パっと出現」を実装するために、指定要素のclassに「sl-bld_flash」を記述しています。

  • 指定要素は<span>以外のタグも指定可能。
  • 指定要素の中身は「テキスト」はもちろん、子要素（HTMLタグ）を内包させることも可能。
  • 画像にブラインドモーションをかけたい場合は、子要素に<img>を入れる。
    <span class="sl-bld_flash">
        //ここに中身を入れる
    </span>

    <script>
        sl_inv('sl-bld_flash' , {
            setpoint : 220 ,
            color : '#FF0000'
        }) ;
    </script>
</body>

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

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

専用関数 sl_bld()

デフォルト関数

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

  • パッと出現

    Class

    sl-bld_flash

    JS code

    sl_bld('sl-bld_flash');
  • フェードイン

    Class

    sl-bld_fade

    JS code

    sl_bld('sl-bld_fade');
  • フォーカスイン

    Class

    sl-bld_focus

    JS code

    sl_bld('sl-bld_focus');

カスタマイズ関数

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

sl_inv('sl-bld_flash' , {
    setpoint : 200 ,
    duration : 1.3 ,
    easing : 'ease-in-out',
    color : '#FF0000'
});

ブラインド：sl_bld()
カスタマイズ可能な設定

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