svg 路径，在 wordpress 的页面滚动上具有属性 stroke-dashoffset 和 svg“fill”

Question

我一直在寻找如何实现 svg 路径，它在页面滚动上具有属性 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>

像这样的事情，但请记住，这是按原样的，这只是为了了解询问初学者它可能如何工作：

魔术小提琴