テキストの動き

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

テキストの動き

「テキストの動き」は見出しやキャッチフレーズといった「伝えたい言葉」を印象付けるために使用すると効果的です。

バラバラに出現

流れるように出現（左から右）

流れるように出現（右から左）

流れるように出現（上から下）

流れるように出現（下から上）

アルファベットがランダムに変化して出現

回転

ランダムに出現

じわっと出現

タイピング風に出現

背景色が伸びて出現（左から右）

背景色が伸びて出現（右から左）

背景色が伸びて出現（上から下）

背景色が伸びて出現（下から上）

滑らかに出現

ほのかに光りながら出現

次回の予定

直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメの「イラスト・オブジェクトの動き」に挑戦してみます ＼＼٩( ‘ω’ )و //／／