テキストの動き
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
テキストの動き
「テキストの動き」は見出しやキャッチフレーズといった「伝えたい言葉」を印象付けるために使用すると効果的です。
バラバラに出現
See the Pen バラバラに出現 by Web Navigator (@web-navigator) on CodePen.
流れるように出現（左から右）
See the Pen 流れるように出現（左から右） by Web Navigator (@web-navigator) on CodePen.
流れるように出現（右から左）
See the Pen 流れるように出現（右から左） by Web Navigator (@web-navigator) on CodePen.
流れるように出現（上から下）
See the Pen 流れるように出現（上から下） by Web Navigator (@web-navigator) on CodePen.
流れるように出現（下から上）
See the Pen 流れるように出現（下から上） by Web Navigator (@web-navigator) on CodePen.
アルファベットがランダムに変化して出現
See the Pen アルファベットがランダムに変化して出現 by Web Navigator (@web-navigator) on CodePen.
回転
See the Pen 回転 by Web Navigator (@web-navigator) on CodePen.
ランダムに出現
See the Pen ランダムに出現 by Web Navigator (@web-navigator) on CodePen.
じわっと出現
See the Pen じわっと出現 by Web Navigator (@web-navigator) on CodePen.
タイピング風に出現
See the Pen タイピング風に出現 by Web Navigator (@web-navigator) on CodePen.
背景色が伸びて出現（左から右）
See the Pen 背景色が伸びて出現（左から右） by Web Navigator (@web-navigator) on CodePen.
背景色が伸びて出現（右から左）
See the Pen 背景色が伸びて出現（右から左） by Web Navigator (@web-navigator) on CodePen.
背景色が伸びて出現（上から下）
See the Pen 背景色が伸びて出現（上から下） by Web Navigator (@web-navigator) on CodePen.
背景色が伸びて出現（下から上）
See the Pen 背景色が伸びて出現（下から上） by Web Navigator (@web-navigator) on CodePen.
滑らかに出現
See the Pen 滑らかに出現 by Web Navigator (@web-navigator) on CodePen.
ほのかに光りながら出現
See the Pen ほのかに光りながら出現 by Web Navigator (@web-navigator) on CodePen.
次回の予定
直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメの「イラスト・オブジェクトの動き」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／
