テキストモーション

指定したテキスト要素に設定した様々なパターンのモーションを、１文字ずつ個別に発動させる関数。

HTMLのマークアップ

    <span class="sl-txm_flash">
        //ここにテキストを入れる
    </span>

    <script>
        sl_txm('sl-txm_flash') ;
    </script>
</body>

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

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

  • 指定要素は<span>以外のタグも指定可能。
  • その他のclassとの併記も可能。（例：class="sample sl-txm_flash")
  • 指定要素の中はテキストのみ対応。入れ子構造になっていると正しく動作しない。
//準備中

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

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

専用関数 sl_txm()

デフォルト関数

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

  • パッと出現

    Class

    sl-txm_flash

    JS code

    sl_txm('sl-txm_flash');
  • フェードイン

    Class

    sl-txm_fade

    JS code

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

    Class

    sl-txm_up

    JS code

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

    Class

    sl-txm_down

    JS code

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

    Class

    sl-txm_scale

    JS code

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

    Class

    sl-txm_bownce

    JS code

    sl_txm('sl-txm_bownce');
  • 回転しながら出現

    Class

    sl-txm_rotate

    JS code

    sl_txm('sl-txm_rotate');
  • フォーカスしながら出現

    Class

    sl-txm_focus

    JS code

    sl_txm('sl-txm_focus');

カスタマイズ関数

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

//準備中

テキストモーション：sl_txm()
カスタマイズ可能な設定

設定項目 機能 設定可能な値 デフォルト値 補足・ヒント
addclass指定要素が画面に入ったタイミングで付与されるclass名を任意の値にするclass名（文字列）**--aft通常は、sl_inv()の（）内で指定しているclass名の末尾に「--aft」を加えたclassが追記されますが、そのclassを任意のものに設定することが可能です。
addpointclassを追記（=モーションを発動）する位置を任意の値にする0 〜 500（単位：px）100表示エリア（画面）の下を0pxとし、画面下から
durationモーションの稼働時間を任意の値にする0 〜 3（単位：s）0.4最大3秒の指定が可能ですが、UXの観点から必要以上に稼働時間を長くしないことを推奨します。
range指定要素の移動距離を任意の値にする0 〜 500（単位：px）40
easingモーションのイージングを任意の値にするCSSで設定可能な
easingの値		easeCSSのプロパティ「transition-timing-function」などで指定可能な値を設定することが可能です。
  • 変更が必要な設定項目のみ記述すればOK（不要な設定項目は項目ごと削除）
  • 設定項目を記述する順番に決まりはありません
  • 各設定項目の値が不適切な場合はデフォルト値が適用されます