テキストでつくるローディングCSSアニメーション 10選
テキストのローディングは海外っぽくてかっこいい！？
今回はローデイングの中でも文字を使ったアニメーションについてご紹介したいと思います。
一般的なローディングは簡単なアイコンを使ったものや、図形を使ったものが多いと思います。
テキストで表現することで、より訪問者にとってローデイング中ということがわかりやすく表現することができます。
図形よりもテキストの方が海外っぽくなるので、かっこよさも増しますね。
テキストのローディングを入れたことない方もここで一緒に作っていきましょう。
よく読まれている記事
ドットが順番に点灯するローデイング
テキストの最後のドットが出たり消えたりするようなアニメーションです。
これはよく見るようなデザインで、簡単に実装できるので初心者の方にもおすすめです。
テキストとドットの配置を変えてみても良さそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
文字ブロックが左から階段のように動くローデイング
文字の入ったブロックが左から順番にずれて階段のように動くアニメーションです。
ブロックが動くだけでなく色の透過度も変化するため、とても複雑なローディングに見えます。
かっこいいサイトの雰囲気などにぴったりのデザインですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
文字が回転しながら流れて消えるローデイング
テキストが回転しながら左から右へ流れて消えていくようなアニメーションです。
動きが大きくわかりやすいので、ローディングにぴったりのデザインです。
それぞれの文字の色を変えたりして、アレンジを楽しめます。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
文字縁から表示されるようなローデイング
紫文字の縁取りを黒色でした後に全体が黒色に変わるようなアニメーションです。
3段階でデザインが変化するので訪問者を飽きさせる事なく離脱率を防ぐ事ができそうですね。
今回のようなSVGのアニメーションも増えつつあるので一度試してみてください。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
テキストボックスが前に倒れていくようなローデイング
テキストの入ったボックスが左から順番に前に倒れて回転していくようなアニメーションです。
ドミノのようにパタパタと倒れていくので、とても遊び心のあるデザインです。
ボックスをなくしてシンプルにテキストだけのアニメーションも良さそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
カーソルに合わせて色が変化するようなローデイング
カーソルのような棒が左右に動くことで文字色が変化するようなアニメーションです。
data-textを使って文字に文字を重ねて色を変化させているように見せています。
コードもシンプルなので、とても取り入れやすくおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
文字が波うつようなローデイング
文字が波のようにカーブして踊っているようなアニメーションです。
動きがとっても可愛いので、見ていてとても楽しい気持ちになりますね。
子供向けのWEBサイトなどにぴったりですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
ボックスの上だけ色が変わるローデイング
ライトで照らされたようにボックス上のテキストの色が反転するようなアニメーションです。
mix-blend-modeを使うことによって、色が重なる部分を色反転させることができます。
あまり見ないような楽しいアニメーションですが、簡単に実装できておすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左から徐々に読み込まれるようなローデイング
データが読み込まれているように色が徐々に塗られていくようなアニメーションです。
フォントをデジタルっぽいものにすることで、より読み込み画面っぽくなります。
ゲームのような広告などにも使えそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
テキストの影がストライプで動くようなローデイング
データが読み込まれているように色が徐々に塗られていくようなアニメーションです。
data-shadowを使って、疑似的にテキストのストライプ影を作って横に動かせて作っています。
見た目も可愛く、ポップな印象もあるので、ファッション系のサイトに最適です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は文字に特化したローデイングのアニメーションをご紹介しました。
文字よりも抽象的な図形などを使っているところも多いので、文字でのローディングはまだまだ見かけることは少ないですね。
図形よりも文字があった方が、訪問者にとっては確実に意図を具体的に伝える事ができます。
また英語だけでなく日本語での実装も面白くて目をひきそうですね。
まだまだいろんなパターンのローディングができると思うので、一緒に作っていきましょう♪
最後までご覧いただきありがとうございました☆彡