こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
サイトにちょっとした「遊び心」を加えたいと思ったことはありませんか？
文字を単に表示するだけでなく、風に吹かれて消えるような表現をCSSだけで実現できたら、
見た人の心をくすぐる印象的なビジュアルになります。
今回は、JavaScriptを使わずにCSSアニメーションとtransformを組み合わせて「文字が風で飛ばされる」ように見せるエフェクトを紹介します。
シンプルながら、動きのあるタイトルロゴやスクロール時の演出に応用しやすいのが特徴です。
ほんの数行のコードで、まるで春風が文字をさらっていくようなアニメーションが作れます。
風で飛ぶように見せるCSSアニメーションの仕組み
この表現は次の3ステップで成り立っています。
- 各文字を1文字ずつspanで囲み、個別にアニメーションを付与
- transform: translateとrotateを使って風に流されるような動きを作る
- opacityでフェードアウトを組み合わせる
このように、「移動」「回転」「透明度」の3つの動きを組み合わせることで、自然に風で飛ばされるような錯覚を生み出します。
基本コード：CSSだけで風で飛ぶ文字
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
風に乗って右上へ飛んでいくような動きが表現されています。
背景を淡いグラデーションにすることで、空をイメージしたナチュラルな雰囲気になります。
応用例：ホバーで文字が飛び散る演出
ページ読み込み時に自動で飛ぶのではなく、マウスを当てたときに風が吹くようにするのもおすすめです。
.wind-text:hover span { animation: blow 2s ease-in forwards; animation-delay: calc(var(--i) * 0.1s); } このようにすれば、ホバーするたびに文字がふわっと飛び去ります。
インタラクティブなタイトル演出にもピッタリです。
応用例：JavaScriptを使用
JavaScriptを使用を使用することでHTMLでspanを囲むことなく実装することができます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
「風で飛んでいく文字」エフェクトは、
わずかなCSSアニメーションで自然で詩的な動きを再現できる表現です。
ロゴやメインコピーに使うと、ページに動的な印象を与え、訪れたユーザーの記憶に残るデザインになります。
さらに、@keyframesの移動方向を調整するだけで「左に流れる風」「下に沈む風」など、
多彩なバリエーションも作れます。
satokotadesignキャンペーン実施中！
