Weblasts

最近よく使うcssを使ったアンダーラインが出た後に文字がニョキッと出てくるアニメーション

自分が担当する案件では最近アイキャッチ部分にスライドショーをほとんど使わなくなり、アンダーラインが出た後に文字がニョキッと出てくるアニメーションを使って文字を動かすことが増えてきました

そんな文字を動かすアニメーションを紹介してみます

文字と背景のアニメーション

文字と背景のアニメーションと表現していますが、実際に見てみないとわからないと思うのでまずはデモを用意しています

「動かす」をクリックでアニメーションが開始し、「もどす」をクリックすると一旦リセットされるので繰り返し動きが確認できます。

DEMO
気候変動というような
大きな問題は
funでありcoolであり
sexyでなければならない

基本となるコード

今回のサンプルで準備したコードはこちらになります

HTMLでは全体をクラス「text」をつけたdiv要素で囲み、一行をクラス「text_underline」をつけたdiv要素で囲み、更にクラス「text_move」をつけたspan要素で囲みます

cssのコードは個人的に肝になっているかなというところだけ紹介しておきますが、それぞれ確認していただければ問題ないかと思います

、全体を囲んでいる「.text」にflex系のプロパティを使って縦並びにしつつ、幅を文章量と同じにしています

アンダーラインのアニメーションは「.text_underline」の擬似要素を用意し、この擬似要素に単色のグラデーションを指定し、「background-size」プロパティで指定しています。
「height」プロパティと「background-size」プロパティで予めラインの高さを指定しておき、ラインの幅は0%から100%になるようにキーフレームアニメーションを設定します

下から文字が出てくるアニメーションは「.text_move」に指定していきます
こちらは「position」プロパティを使ってキーフレームアニメーションで動かしているだけなので問題ないかと思いますが、動かす量はフォントの種類やサイズ、line-heightによって変わるので都度調整していくしかありません

これだけなんですが、jsと組み合わせていけばアイキャッチ部分以外でも使えるので、どのサイトでも使っていてマンネリ化しつつある下からフェードインとは違ったアニメーションにすることも可能かと思われます。