CSS 文字を跳ねさせて、ウェーブ風

文字を hover させたときの動きで、なにか楽しいものがないかと、最近ずっと探しています。これまでアンダーラインの動きをいろいろ試行錯誤してたんですが、文字自体も動かしたいなと思い、シンプルなアクションで、シンプルなコードでできるものないかなあといろいろ見ていたのですが、文字がウェーブするものを見つけて、なんとなく個人的に気に入ったので実装してみました。

参考にしたのがこちら。

【CSS】マウスオーバーでテキストがウェーブするアニメーション
マウスオーバーでテキストがウェーブするCSSのアニメーションのご紹介です。 リンクやボタン、テキストにマウスカーソルを乗せると、要素が持っているテキストが一文字ずつ跳ねるように動くアニメーションです。

いい感じです。さりげなくアピールしている感じが好きです。

ただ、コードを見てみると思いのほかアナログというか、一文字ずつ span で分けて CSS で指定する方法のようで、けっこう記述が必要みたいです。構造は単純なので、シンプルといえばシンプルですね。

似たような動きをつけられる jQuery とかないかな、それだったらもっとシンプルな記述になる気がするな、と思い少し探してみましたが、すぐには見つかりませんでした。なので上記の方法でやってみました。はやくやってみたくて探すのやめた、みたいな側面もあったりなかったりしますね。jQuery も沼みたいなものなので、手を付けると際限なく時間を持っていかれてしまうので、また後日探すことにします。

ひとまず丸コピペしてみます。

See the Pen JjoMPby by ishi (@ishi-nagoya) on CodePen.

元の color が #fff で codepen だと見えなくなっちゃうので、#000 に変更しています。hover するとフワッとウェーブする。かわいい。

文字数を増やすときは .wave:hover span:nth-child() をどんどん追加していけばいいですね。長い文章をウェーブさせたいときは不向きな方法だな、と思いましたが、よく考えたら長い文章をウェーブさせる機会ってなかなかなさそうですね。くどそう。でもやりたくなりそう。別の方法も探しておこう。

で、実装してみた結果、元々はリンクを張った、こじんまりとした単語に使おうと思っていたんですが、存外気に入ってしまったので、もうちょっと目立つ、 フォントサイズ大きめの見出しに使うことにしました。リンクは、ちょっとまた別の動きを探します。こんなことをしているから、なかなか完成しない。

その見出しなんですが、特にリンクを張っているわけではないので、hover しなくてもウェーブするようにしました。まず書き換えたものがこちら。

See the Pen mdypbmz by ishi (@ishi-nagoya) on CodePen.

hover しなくても、一定の時間でウェーブします。

.wave span の中の animation-duration: でループ全体の時間を設定して、@keyframes で実際にウェーブする間隔や、スピードや、タイミングを決めています。上のものでいうと、全体がループする時間は2.5秒で、2.5秒の10%~15%のタイミングで上に跳ねる動き、15%~20%のタイミングで下に戻る動きをするようになっています。ここをいじれば跳ねるときだけとてもゆっくりとか、延々ピョンピョンさせたりとか、いろいろできますね。

あとは .wave span の中の animation-direction: が、alternate のままだとちょっと挙動がおかしくなるので normal にしたり、いつまでも跳ねている様子を眺めていたいので animation-iteration-count: を infinite にしたりですとか、細々といじって完成。

構造が単純なので苦労せずにいろいろできました。でもやっぱり、jQuery で実装できたらそれが一番楽なんだろうな。次はもっとしっかり探してみよう。と言いつつ、次はウェーブではなく、別の動きに惹かれてしまっていそうな気もします。

かしこ

タイトルとURLをコピーしました