【コピペ】HTMLとJavaScriptで作る！線のみの波線アニメーション（jQuery不要）

2月 21, 2025 2月 21, 2025

こた

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

ウェブサイトにさりげなく動きをつけると、視覚的な魅力がグッと増すことをご存知でしょうか？

特に、シンプルな線の波アニメーションは、背景やコンテンツの装飾として使うことで、洗練された印象を与えられます。

波のアニメーションといえば SVG や CSSアニメーションでも作成できますが、今回は HTMLのcanvasとJavaScriptを使って、jQueryなしで実装する方法 を紹介します。

この方法なら、軽量＆スムーズなアニメーションを実現でき、余計なライブラリを使わずに済みます。

サイトのパフォーマンスを落とさず、動的なデザインを取り入れたい方におすすめです！

完成イメージ

今回作るのは、 3本の波線が異なる速度・高さ・波長で動くアニメーションです。
シンプルな線のみで波を描き、余計な装飾はせずに軽量化を重視しました。

塗りつぶしなし（線のみ）
3本の波線が異なる動きで描画
JavaScriptのみでアニメーション（jQuery不要）

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTMLの準備

まずは、canvasタグを用意します。

<canvas id="waveCanvas"></canvas>

コードの解説

canvasの設定

body { 
margin: 0; 
overflow: hidden; 
background-color: #222; 
} 
canvas { position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
}

これにより、波の描画領域をページの中央に配置し、余計なスクロールを防ぎます。

drawWave()関数

この関数を使って波の線を描画します。

const canvas = document.getElementById("waveCanvas");
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = 300;

    let t = 0; // 時間変数

    function drawWave(color, speed, amplitude, wavelength, yOffset) {
      ctx.strokeStyle = color;
      ctx.lineWidth = 2;
      ctx.beginPath();

      for (let x = 0; x < canvas.width; x++) {
        const y = Math.sin((x + t * speed) / wavelength) * amplitude + canvas.height / 2 + yOffset;
        ctx.lineTo(x, y);
      }

      ctx.stroke();
    }

animate()関数

アニメーションを実行する関数です。

function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      drawWave("#00FFFF", 3, 20, 100, -20); // シアン
      drawWave("#FF00FF", 2.5, 30, 120, 0); // マゼンタ
      drawWave("#FFFF00", 2, 25, 140, 20); // イエロー

      t += 2; // 波の動きを制御
      requestAnimationFrame(animate);
    }

    animate();