静止画だけのサイトは、どこか寂しい印象を与えがちです。 そんな時、文字が絶え間なく流れ続ける「マーキー（ループ）アニメーション」を取り入れるだけで、画面全体に心地よいリズムと躍動感が生まれます。
この記事では、電光掲示板のようなレトロな動きではなく、現代のWebデザインにマッチする洗練されたループ表現を5つ紹介します。 「Contents」という文字をベースにしていますが、ロゴやキャッチコピーにも応用可能です。SWELLでコピペするだけで、プロっぽい演出が手に入ります。
Infinite Flow（インフィニット・フロー）
最も汎用性の高い、横一直線に文字が流れ続けるデザインです。途切れることなく無限にループし、ホバーするとゆっくり停止して読みやすくなります。
※滑らかにつなぐため、HTML内でテキストを繰り返して記述します。
See the Pen Infinite Flow by BaseKENT (@basekent) on CodePen.
調整方法
- 流れる速度 (
10s): 秒数を大きくするとゆっくりになり、小さくすると速くなります。 - 文字間の余白 (
margin-right):2remを調整して、単語同士の間隔を変えます。 - ループのコツ:
translateX(-50%)で折り返すため、表示領域を埋めるのに十分な数の<span>をHTMLに記述してください。
Bi-directional Slide（バイディレクション・スライド）
上段は左へ、下段は右へ。互い違いに流れ続けることで、画面に奥行きと複雑なリズムを作ります。背景の装飾として非常に人気の高いスタイルです。
See the Pen Bi-directional Slide by BaseKENT (@basekent) on CodePen.
調整方法
- 色の反転: 現在は「黒背景・白文字」ですが、CSSの
backgroundとcolorを逆にすれば「白背景・黒文字」になります。 - 速度変化: ホバー時の
animation-duration: 30sを削除すれば、速度を変えずに色だけ変えることができます。
Vertical Slot（バーティカル・スロット）
スロットマシンのように縦方向に文字が流れ続けます。横書きのWebサイトにおいて、縦の動きは視線を止める強力なフックになります。ホバーで「当たり」のように強調表示されます。
See the Pen Vertical Slot by BaseKENT (@basekent) on CodePen.
調整方法
- 表示領域の高さ (
height: 3rem): 文字サイズに合わせて、枠の高さを調整してください。 - 移動距離 (
-80%): HTML内の要素数に応じて変更します（5個ある場合、4個分動かすので80%）。
Circular Badge（サークル・バッジ）
テキストが円を描くように回転し続ける、スタンプやバッジのようなデザインです。SVGを使用することで、文字をきれいにカーブさせています。ホバーで回転が逆向きになります。
See the Pen Circular Badge by BaseKENT (@basekent) on CodePen.
調整方法
- サイズ (
width="150"): HTMLのwidth/heightと CSSのwidth/heightを両方変更してサイズを変えます。 - 文字の内容:
<textPath>内のテキストを変更します。円周の長さに合わせて文字数を調整するのがきれいに見せるコツです。
Skew & Rush（スキュー＆ラッシュ）
少し斜体（スキュー）がかかった状態で高速に流れ、スピード感を演出します。スポーツ系やストリート系のデザインに最適です。ホバーすると急ブレーキをかけて水平に戻り、ゆっくり確認できるようになります。
See the Pen Skew & Rush) by BaseKENT (@basekent) on CodePen.
調整方法
- スピード感: 通常時の
2sを1sにするとさらに高速になり、残像のような効果が出ます。 - 区切り文字: テキストに含まれる
///を★や●に変えても面白い表現になります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
