CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで波エフェクトを作る方法｜Waveフィルタのパラメータと使い方

Waveフィルタは、オブジェクトに正弦波状の歪みを与え、あたかも水面のように揺らいで見える「波エフェクト」を実現するためのものです。画像やテキストに独特なゆらぎ表現を加えたい場合に活用できます。

Waveフィルタで指定できるパラメータ

このフィルタでは、以下のパラメータを使用してエフェクトの見た目を細かく調整できます。

番号パラメータと説明
1.Add
値が「1」の場合、元の画像を波状の画像に重ねて表示します。「0」の場合は元の画像を追加しません。
2.Freq
表示する波の数を指定します。数値が大きいほど、より多くの波が生成されます。
3.Light
波面にかかる光の強さを指定します（0〜100）。光の強弱によって立体感が変化します。
4.Phase
正弦波の開始位置（位相）を指定します（0〜100）。値を変更すると波の始まり方をずらすことができます。
5.Strength
波エフェクトの強度を指定します。数値が大きいほど、歪みが強くなります。

実装サンプル

以下のコードを実行すると、画像とテキストの両方に波エフェクトを適用できます。

<html>
  <head>
  </head>
  <body>

    <img src = "/css/images/logo.png"
        alt = "CSS Logo"
        style = "FILTER: Chroma(Color = #000000)
        Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">

    <p>テキストの例：</p>
    <div style = "width: 357;
        height: 50;
        font-size: 30pt;
        font-family: Arial Black;
        color: red;
        Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div>
  </body>
</html>

利用時の注意点

このWaveフィルタは、旧Internet Explorer向けの独自拡張（DirectXフィルタ）であるため、Chrome・Firefox・Edge・Safariなどのモダンブラウザでは動作しない点に注意してください。現在のブラウザ環境で同様の波エフェクトを実装したい場合は、SVGフィルタ（feTurbulence要素など）やWebGL、アニメーション対応のJavaScriptライブラリを活用する方法が一般的です。レガシー環境のサポートが必要なプロジェクトでのみ、本記事のコードを参考にしてください。

  1. CSSで実現するTada（タダ）アニメーション効果の作り方

    CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html>    <head>       <style>          .animated {

  2. CSSで作るスイングアニメーション効果の実装方法

    スイング(Swing)アニメーションは、吊り下げられた要素や軸を中心とした要素を、前後・左右に揺らす動きを表現できるCSSアニメーション効果です。振り子のような自然な揺れを再現でき、ロゴやバナー、アイコンなどに注目を集める演出として活用できます。 スイングアニメーションの仕組み スイングアニメーションは、主に次のCSS機能を組み合わせて実装します。 transform-origin: top center; … 要素の上部中央を回転の基点に設定し、ぶら下がっているように見せる @keyframes と rotate() … 回転角度を15°→ -10°→ 5°→ -5°→ 0°と段階的に変化