Как рисовать при прокрутке

Рисование при прокрутке

Использование 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>
// Получение элемента <path> с ID "triangle"
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>

Попробуйте сами

Связанные страницы

Урок:Уроки SVG