テキストのサーキュラーループアニメーション

note

テキストを1文字ずつ分解し円形に配置したものを、滑らかな回転アニメーションでループ表示させています。マウスホバー時には回転スピードや円の径が変化し、各文字にも個別の動きを付加しています。（このサンプルでは、テキストインプットに入れた文字でシミュレーションが可能です）

テキストの文字列を1文字ずつHTML要素でマークアップし、まずGridレイアウトで12時の位置に配置します。その後、円の中心を基準に各文字を円弧上に等間隔で配置することで環状のレイアウトを実現しています。アニメーションについては、rotateプロパティとanimateプロパティを組み合わせることでループ動作を実装しています。

テキストのみのシンプルなデザインで、アニメーション自体も派手な動きではありませんが、ウェブサイトでよくみられるグリッドレイアウトとは大きく異なる形のため、デザインのアクセントとして非常に効果的です。CTAボタンのポイントとして使用したり、画面から大きくはみ出すサイズで背景として配置したりと、さまざまな用途に活用できる汎用性の高いデザイン要素となっています。

【使用ライブラリ】 React