スクロール中に描画する方法

スクロール時の描画

SVGとJavaScriptを使用してスクロール中に三角形を描画 - ただし、それは <path> 要素：

例

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// IDが"triangle"の<p>要素を取得します
var triangle = document.getElementById("triangle");
// <path>要素の長さを取得します
var length = triangle.getTotalLength();
// 描画の開始位置（虚線モードを設定します。ここではパスの長さと同じ値に設定し、実際には全体のパスを「大きな虚線」として見なします。）
triangle.style.strokeDasharray = length;
/* 虚線オフセット量を設定します。初期にパスの長さに設定し、全体のパスがビューアからオフセットされ、三角形を隠します。
スクロールに従って、このオフセット量は徐々に減少し、三角形が次第に表示されます。
この行の削除で、スライド描画の前に三角形を表示できます。*/
triangle.style.strokeDashoffset = length;
// ウィンドウのスクロールイベントを監視し、スクロール時に myFunction 関数を呼び出します。
window.addEventListener("scroll", myFunction);
function myFunction() {
  // スクロールパーセント = （現在のスクロール高さ） / （全てのスクロール可能高さ）
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // 描画すべき長さ = 総長 * スクロールパーセント
  var draw = length * scrollpercent;
  // 時間が上にスライドすると、実際には反対に描画されます（完全から不完全へ）、したがってここでは総長から描画すべき長さを引きます。
  triangle.style.strokeDashoffset = length - draw;
}

</script>

実際に試してみる

関連ページCodeW3C.comについて