テキストの動き

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アニメの「イラスト・オブジェクトの動き」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／

合わせて読みたい

イラスト・オブジェクトの動き

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。