Como desenhar ao rolar

Desenho ao rolar

Desenhar triângulos usando SVG e JavaScript ao rolar - Atente para que ele seja <path> Elemento: }}

Exemplo

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Obter o elemento <path> com ID "triangle"
var triangle = document.getElementById("triangle");
// Obter comprimento do elemento <path>
var length = triangle.getTotalLength();
// Posição de início do desenho (definir modo de traço). Aqui definido como valor igual ao comprimento do caminho, na verdade considerando todo o caminho como um "grande traço".
triangle.style.strokeDasharray = length;
/* Definir a offset de traço. Inicialmente definido como comprimento do caminho, para que todo o caminho seja deslocado da visão, ocultando o triângulo.
À medida que rolamos, essa offset diminui gradualmente, revelando gradualmente o triângulo.
Remover essa linha de código pode exibir o triângulo antes do desenho da rolagem.
triangle.style.strokeDashoffset = length;
// Escutar o evento de rolagem da janela e chamar a função myFunction ao rolar.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Calcular o percentual de rolagem = (altura de rolagem atual) / (altura total de rolagem disponível)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Calcular o comprimento a ser desenhado = comprimento total * percentual de rolagem
  var draw = length * scrollpercent;
  // Quando rolamos para cima, na verdade estamos desenhando ao contrário (do completo para o incompleto), então aqui usamos o comprimento total subtraído pelo comprimento a ser desenhado.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Experimente você mesmo

Páginas relacionadas

Tutorial:Tutorial de SVG