Drawing Curved (Responsive) 드로잉 (스크롤)시 SVG 경로

Question

strokeDashArray 트릭을 사용하여 SVG 애니메이션을 적용한 모든 버즈를 읽은 후이 기능을 블로그의 Cable Codes 블로그에있는 사용자의 스크롤 위치에 연결하는 코드를 발견했습니다.

이 아이디어는 훌륭하지만 실제로는 한 지점에서 실제로 반복되는 물결 모양의 매력적인 경로가 있습니다. 그래서 계산 된 전체 길의 길이를 나누어서 좋은 중간 지점을 얻었으나 줄을 서서 뒤쳐 지거나 앞을 내다 볼 때 줄서는 것이 여전히 부족합니다.

여기에 일부 조정과 스 니펫의 예 :

$(document).ready(function(){ 

    $(window).scroll(function() { 
    drawLine($('#route'), document.getElementById('path')); 
    }); 

    //draw the line 
    function drawLine(container, line){ 

    var pathLength = line.getTotalLength(), 
     distanceFromTop = container.offset().top - $(window).scrollTop(), 
     percentDone = 1 - (distanceFromTop/$(window).height()), 
     length = percentDone * pathLength/30; 

    line.style.strokeDasharray = [ length ,pathLength].join(' '); 
    } 

}); 

내가 경로와 내 조정과 코드의 조각으로 CodePen했다. 사용자가 스크롤 할 때 뷰포트의 중심에이 선의 끝을 유지할 수있는 방법에 대한 아이디어가 있습니까?

업데이트 : SVG는 실제로 반응 형입니다. 이것은 몇 가지를 변경합니까? 여기에 an updated CodePen이 있습니다.

Answer 1

스크롤 백분율을 계산하는 방법이 조금 벗어났습니다. 여기 작업 버전을 만들었습니다 : 당신은 문서의 높이에서 창 높이를 뺀 scrolltop의 최대 값을 작업해야

http://codepen.io/anon/pen/idvoh

.

선이 뒤틀리고 뒤 틀릴 때 앞이나 뒤를 어떻게 멈추게하는지에 관해서는. 일정한 높이로 선분을 배치해야합니다. 예를 들어, 선이 10 개의 베 지어로 구성되어 있다면 선의 높이의 대략 1/10 배에서 시작해야합니다. 그것은 보행 자세를 올바르게 유지해야합니다.