バラバラに出現
JavaScriptを使い画面が読み込まれたら1文字づつ<span>タグを付与する。
また、画面が読み込まれた時とスクロールをした時にTextRandomAnimeにappearRandomtextというCSSアニメーション用のクラス名をつける。
appearRandomtextがついたらCSSでspanタグの透過を0から1に変化させ、spanタグのついた2の倍数と3の倍数＋1の文字列にアニメーションの遅延をかけてバラバラに出現させる。
See the Pen テキストがバラバラに出現 by Toru Katsumata (@Toru-Katsumata) on CodePen.
流れるように出現（右から左）
CSSで、親要素slide-inにoverflow:hiddenを指定してはみ出ている要素を隠す。
JavaScriptで動きのきっかけ（画面が読み込まれたら、スクロールしたら）を判別し、親要素のslide-inと子要素のslide-in_innerに方向が逆の動きをするクラス名を付与して、擬似的に文字にマスクをかけているように見せる。
（例：親要素を左の枠外から右に、子要素を右の枠外から左に移動し交差させる）
See the Pen テキストが流れるように出現（右から左） by Toru Katsumata (@Toru-Katsumata) on CodePen.
流れるように出現（左から右）
基本的な動きは「流れるように出現（右から左）」と同じ。
See the Pen テキストが流れるように出現（左から右） by Toru Katsumata (@Toru-Katsumata) on CodePen.
流れるように出現（上から下）
基本的な動きは「流れるように出現（右から左）」と同じ。
（例：親要素を上の枠外から下に、子要素を下の枠外から上に移動し交差させる）
See the Pen テキストが流れるように出現（上から下） by Toru Katsumata (@Toru-Katsumata) on CodePen.
流れるように出現（下から上）
基本的な動きは「流れるように出現（右から左）」と同じ。
See the Pen テキストが流れるように出現（下から上） by Toru Katsumata (@Toru-Katsumata) on CodePen.
アルファベットがランダムに変化して出現
「shuffle-text」というライブラリを使いjs_typingとついた要素のアルファベットをランダムに変化させる。
画面を少し動かす度にアルファベットがシャッフルしないよう、一度アニメーションをした文字列には endAnime というクラス名をJavaScriptで付与し、endAnimeとついた文字列は動かさないようにする。
【使用するライブラリ】
shuffle-text（https://ics.media/entry/15498/）
See the Pen アルファベットがランダムに変化して出現 by Toru Katsumata (@Toru-Katsumata) on CodePen.
回転
JavaScriptを使い、画面が読み込まれたら1文字づつ<span>タグを付与する。
<span>タグにはCSSのanimation-delay（アニメーション開始の遅延時間）を直接指定して遅延時間を自動的に増やす。
画面が読み込まれた時と、スクロールした時にHTML内のrollAnimeにrollというクラス名を付け、CSSのアニメーションを使って、<span>タグを回転させる。
See the Pen テキストが回転する by Toru Katsumata (@Toru-Katsumata) on CodePen.
ランダムに出現
JavaScriptライブラリのtextillate.jsとlettering.js、CSSライブラリの「animate.css」の動きを組み合わせrandomAnimeとついた文字列のアルファベット1文字づつをランダムに出現させる。
【使用するライブラリ】
textillate.js(https://github.com/jschr/textillate)
lettering.js(https://github.com/davatron5000/Lettering.js)
animate.css(https://daneden.github.io/animate.css/)
See the Pen テキストがランダムに出現する by Toru Katsumata (@Toru-Katsumata) on CodePen.
