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

JavaScriptとSVGを使ってスクロールに合わせて線を描画する方法

ページをスクロールすると、それに連動してSVGのパスが少しずつ描かれていく演出は、JavaScriptのgetTotalLength()メソッドと、stroke-dasharray・stroke-dashoffsetプロパティを組み合わせることで実現できます。

基本的な仕組みは以下の通りです。

  • getTotalLength()でパスの全長を取得する
  • stroke-dasharrayとstroke-dashoffsetを同じ長さに設定し、初期状態では線を見えなくする
  • スクロール量を取得し、その割合に応じてstroke-dashoffsetの値を減らしていくことで、線が徐々に描画される

実装コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        height: 2000px;
        background: #f1f1f1;
    }
    svg {
        position: fixed;
        top: 15%;
        width: 400px;
        height: 210px;
        margin-left: -50px;
    }
</style>
</head>
<body>
<h1>Scroll Using JavaScript and SVG example</h1>
<svg>
<path
fill="none"
stroke="purple"
stroke-width="5"
id="polygon"
d="M 150 350 Q 150 50 250 150 Q 250 550 300 150 Q 350 50 400 300"/>
</svg>
<script>
    var polygon = document.getElementById("polygon");
    var length = polygon.getTotalLength();
    polygon.style.strokeDasharray = length;
    polygon.style.strokeDashoffset = length;
    window.addEventListener("scroll", drawPoly);
    function drawPoly() {
        var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) /
(document.documentElement.scrollHeight - document.documentElement.clientHeight);
        var draw = length * scrollpercent;
        polygon.style.strokeDashoffset = length - draw;
    }
</script>
</body>
</html>

コードのポイント解説

1. パスの全長を取得して線を隠す

getTotalLength()で対象パスの総延長を数値として取得し、それをstrokeDasharray（破線の間隔）とstrokeDashoffset（破線の開始位置）に設定します。オフセットが全長と等しい場合、線は画面上に一切表示されません。これが「まだ何も描かれていない」初期状態になります。

2. スクロール率の計算

drawPoly()関数内では、現在のスクロール位置（document.body.scrollTopとdocument.documentElement.scrollTopの合計）を、スクロール可能な最大距離（scrollHeight - clientHeight）で割ることで、0〜1の範囲のスクロール率を算出しています。

3. オフセットを動的に更新

スクロール率にパスの全長を掛けた分だけstrokeDashoffsetを減らします。ページ最下部までスクロールすると、オフセットが0になり、パス全体が完全に描き上がります。

出力結果

上記のコードを実行すると、次のような表示になります。

JavaScriptとSVGを使ってスクロールに合わせて線を描画する方法

ページを最下部までスクロールすると、曲線が完全に描画されます。

JavaScriptとSVGを使ってスクロールに合わせて線を描画する方法

この手法は、スクロールストーリーテリングやアニメーション付きのランディングページなど、インタラクティブなWebデザインで広く活用されています。position: fixedを指定しているため、SVGはスクロール中も常に画面上の同じ位置に表示される点にも注目してください。

  1. JavaとOpenCVで塗りつぶしポリゴン（多角形）を描画する方法

    Java版OpenCVライブラリの org.opencv.imgproc パッケージには、画像処理のための各種メソッドを提供する Imgproc クラスが含まれています。塗りつぶされたポリゴン（多角形）を描画したい場合は、このクラスが持つ fillPoly() メソッドを呼び出します。fillPoly() メソッドのパラメータfillPoly() メソッドは、以下の引数を受け取ります。ポリゴンを描画する対象の画像を表す Mat オブジェクトMatOfPoint 型のオブジェクトを格納した List オブジェクト（ポリゴンの頂点座標）ポリゴンの色を表す Scalar オブジェクト線の種類（ライン

  2. JavaとOpenCVでポリゴン（凸多角形）を描画する方法をわかりやすく解説

    すべての内角が180度未満であるポリゴン（多角形）は「凸多角形」と呼ばれます。Java版OpenCVライブラリのorg.opencv.imgprocパッケージにはImgprocクラスが用意されており、このクラスのfillConvexPoly()メソッドを呼び出すことで、凸多角形を簡単に描画できます。 なお、凹みのある多角形（凹多角形）を描きたい場合は、代わりにfillPoly()メソッドを使用してください。fillConvexPoly()は凸多角形専用の高速な描画メソッドです。 fillConvexPoly()メソッドのパラメータ fillConvexPoly()メソッドは、以下の3つの引数を