svg путь, который имеет свойство stroke-dashoffset и svg "fill" при прокрутке страницы в wordpress

Question

Я пытался найти способ получить svg path, у которого есть свойство stroke-dashoffset и svg "fill" при прокрутке страницы, это было сделано на этом сайте: https://asaro.co.uk/

Answer 1

$(document).on('scroll', function(e){

  var d = d || parseInt($('.c-line.c-line--fill-2').css('stroke-dashoffset'));

  var lastScrollTop = 0;
       st = $(this).scrollTop();
        if(st < lastScrollTop) {
            if( d <= 1800){
              d += $(this).scrollTop() / 20;
            }
        }
        else {
          if( d >= 0){
            d -= $(this).scrollTop() / 20;
          }
        }
        lastScrollTop = st;


$('.c-line.c-line--fill-2').css('stroke-dashoffset', d );

});

body {
  background: #000; 
  height:1000px;
}

.c-line-wrap {
    position: absolute;
}

.c-line-wrap svg {
    height: 100%;
    width: 100%;
}

.c-line {
    fill: none;
    stroke-miterlimit: 10;
}

.c-line--fill-1 {
    stroke: #404150;
}

.c-line--fill-2 {
    stroke: #fff;
}

.c-line--dashed {
    stroke: #131424;
    stroke-dasharray: 5 5;
    stroke-width: 4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="cont">
        <svg viewBox="0 0 1327.78 2952.52" preserveAspectRatio="none">
            <path class="c-line c-line--fill c-line--fill-1" d="M.11.49s415.15,96,291.15,576-132,896,340,1284,732,472,692,1092" vector-effect="non-scaling-stroke"></path>
            <path class="c-line c-line--fill c-line--fill-2 js-line--fill" d="M.11.49s415.15,96,291.15,576-132,896,340,1284,732,472,692,1092" vector-effect="non-scaling-stroke" style="stroke-dashoffset: 1800; stroke-dasharray: 1879.02px, 1889.02px;"></path>
            <path class="c-line c-line--dashed" d="M.11.49s415.15,96,291.15,576-132,896,340,1284,732,472,692,1092" vector-effect="non-scaling-stroke"></path>
        </svg>
</div>

Как-то так, но помните, это КАК ЕСТЬ и это только , чтобы понять, чтобы спросить у начинающего, как это, вероятно, может работать:

Волшебная скрипка