捉えどころのない揺らぎは、見る人の心を惹きつけます。 きっちりと整列したデザインの中に、煙や液体のような「不定形な動き」を取り入れることで、サイトの印象は劇的に深みを増します。
この記事では、CSSだけで実装できる「スモーク＆ディストーション」系のテキストアニメーションを5つ厳選しました。 重たい動画ファイルやJavaScriptは不要。SWELLでコピペするだけで実現できる、幻想的でモダンな演出をご紹介します。
Smoky Blur（スモーキー・ブラー）
文字が煙に包まれたように、ゆっくりとぼやけたり、はっきりしたりを繰り返します。待機中は常に視界が揺らいでいるような、幻想的な雰囲気を演出。ホバーすると、霧が晴れるようにクリアになります。
See the Pen Smoky Blur by BaseKENT (@basekent) on CodePen.
調整方法
- 煙の濃さ (
blur(4px)):@keyframes内のblurの値を大きくすると、より深くぼやけます。 - 揺れの速さ (
4s):animationの秒数を変更すると、揺らぎのサイクルが変化します。
Liquid Distortion（リキッド・ディストーション）
文字が水飴のようにぐにゃりと曲がったり伸びたりする、粘性のある歪み表現です。待機中はゆっくりと形を変え続け、ホバーすると弾力のある動きで元の形に戻ります。
See the Pen Liquid Distortion by BaseKENT (@basekent) on CodePen.
調整方法
- 歪みの量:
@keyframes内のscaleY（縦伸縮）、scaleX（横伸縮）、skewX（傾き）の値を調整することで、液体の粘り気や動きの激しさを変えられます。
Mirage Wave（ミラージュ・ウェーブ）
蜃気楼のように、熱気で空間が揺らいで見えるエフェクトです。横方向の細かい波打ちとブラーを組み合わせ、捉えどころのない質感を表現。ホバーで揺れが収まります。
See the Pen Mirage Wave by BaseKENT (@basekent) on CodePen.
調整方法
- 歪みの模様: HTML側の
<feTurbulence>のbaseFrequency="0.02 0.15"の値を変更すると、歪みの細かさや方向が変わります。 - 歪みの強さ:
<feDisplacementMap>のscale="5"を大きくすると、歪みが激しくなります。 - 注意点: SWELLで利用する場合、「カスタムHTML」ブロックにSVG定義とテキストの両方を記述してください。
Glitch Noise Distortion（グリッチ・ノイズ・ディストーション）
デジタル信号が乱れたような、瞬間的な歪みと色ずれ（色収差）が発生します。不安定でサイバーパンクな印象を与え、ホバーするとノイズが激しく走った後に安定します。
See the Pen Glitch Noise Distortion by BaseKENT (@basekent) on CodePen.
調整方法
- 色ずれの色:
::beforeのcolor: #f00;(赤) と::afterのcolor: #0ff;(青シアン) を変更すると、グリッチのカラーが変わります。 - 頻度:
animationの秒数を短くすると、より頻繁にノイズが走ります。
Vapor Trail（ヴェイパー・トレイル）
飛行機雲（ヴェイパー・トレイル）のように、文字から煙が尾を引いて立ち上ります。待機中は煙がゆっくりと揺らめき、ホバーすると本体が少し浮き上がり、煙が濃くなります。
See the Pen Vapor Trail by BaseKENT (@basekent) on CodePen.
調整方法
- 煙の高さと方向:
@keyframes vaporRising内のtranslateY（上昇量）とskewX（左右のなびき）を調整します。 - 煙の色と濃さ:
text-shadowのrgba値を変更すると、煙の色や濃さを変えられます（例：白っぽい煙ならrgba(255,255,255,...)）。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
