Webサイトの文字は、必ずしも「まっすぐ」である必要はありません。
テキストを円形に配置したり、波線に沿って動かしたりする「曲線・パスアニメーション」は、デザインに有機的な柔らかさと圧倒的な躍動感をもたらします。バッジやあしらいとしても非常に人気の高い表現です。
この記事では、SWELLにコピペするだけで使える、円形やパスに沿ったテキストアニメーションを5つ紹介します。 表示中もくるくると回り続け、ホバーでピタッとアクションを起こす、洗練されたコードをお試しください。
Rotating Badge（ローテーティング・バッジ）
テキストが綺麗な円を描き、レコードやエンブレムのようにゆっくりと回転し続けます。SVGを使うことで文字の歪みなく美しい円形を保ちます。ホバーすると回転が逆になり、文字が少し浮き上がります。
See the Pen Rotating Badge by BaseKENT (@basekent) on CodePen.
調整方法
- 円のサイズ:
<svg>タグのwidth="120" height="120"を変更すると全体のサイズが変わります。 - 文字の量:
<textPath>の中身を変更してください。円周の長さに合うようにテキストを繰り返す（例：Contentsを3回書く）のが綺麗に見せるコツです。
Wave Path Flow（ウェーブ・パス・フロー）
見えない波線（サイン波）の軌道上を、テキストがジェットコースターのように滑らかに流れ続けます。ホバーすると文字の流れるスピードがゆっくりになり、文字色が濃くなります。
JavaScript使用
See the Pen Wave Path Flow by BaseKENT (@basekent) on CodePen.
調整方法
- 波の形: HTMLの
<path>のd="..."の数値を書き換えることで波の高さや間隔を変えられますが、少し難易度が高いため、まずはそのままお使いいただくのがおすすめです。 (※もし波の間隔（周期）を変更した場合は、JavaScript内のif (offset <= -150)とoffset += 150;の数値も、新しい波1つ分の幅に合わせて変更してください) - 流れるスピード（通常時）: JavaScript内の
let speed = 0.6;および、mouseleaveイベント内のspeed = 0.6の数値を変更します。数値を大きくするほど速く流れます。 - 流れるスピード（ホバー時）: JavaScript内の
mouseenterイベント内のspeed = 0.2の数値を変更します。0にすれば完全に一時停止させることも可能です。 - 文字の色: CSS内の
fill: #444;（通常時）とfill: #000;（ホバー時）のカラーコードを任意の色に変更してください。
Cylinder Carousel（シリンダー・カルーセル）
純粋なCSSの3D表現（rotateY と translateZ）を使い、円柱（シリンダー）の表面に文字が貼り付いているように配置します。待機中は立体的に回転し、ホバーで正面を向いて停止します。
See the Pen Cylinder Carousel by BaseKENT (@basekent) on CodePen.
調整方法
- 円柱の半径 (
translateZ(80px)):80pxを120pxなどに大きくすると、円柱の直径が大きくなり文字の隙間が広がります。 - 文字数の変更: 現在は8文字（360度 ÷ 8 = 45度ずつ）です。文字数を変える場合は、角度の計算をし直して
nth-childの指定を追加・修正してください。
Pendulum Arch（ペンデュラム・アーチ）
文字がアーチ状（上半分だけの円）に配置され、振り子（ペンデュラム）のように左右にゆらゆらと揺れ続けます。ホバーすると文字の間隔が扇のようにカシャッと広がります。
See the Pen Pendulum Arch by BaseKENT (@basekent) on CodePen.
調整方法
- アーチの大きさ (
transform-origin: center 80px):80pxを120pxにすると、より大きなカーブ（緩やかなアーチ）になります。 - ホバー時の開き具合:
:hover spanのrotateの角度を調整することで、扇の開き具合をコントロールできます。
Infinity Loop（インフィニティ・ループ）
テキストが「8の字（無限大マーク）」の軌道を永遠に描き続けます。SVGのパスをクロスさせることで、立体的で不思議な視覚効果を生み出します。ホバーで文字が太くなり、動きが一時停止します。
JavaScript使用
See the Pen Infinity Loop by BaseKENT (@basekent) on CodePen.
調整方法
- 文字の詰まり具合 (
textLength="350"): HTML側のtextLengthの数値を調整すると、パス上での文字の広がり方を調整できます。 - スピード:
animation: infinityFlow 5sの秒数を短くすると、ハイスピードで8の字を駆け抜けます。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
