スクロールでSVGの長さを連続的に減らす

スクロールするときに、スクロールするときにsvg行のx2ポイントがその前の値の50％になるようにしようとしています。スクロールでSVGの長さを連続的に減らす

はあなたが×2 = 100で開始することを、あなたはonscroll機能を行い、その後、あなたがスクロールすると、行が少なく迅速に縮小するx2 = 50, 25, 12.5...など

を持つことになりましょう。

これは私がこれまで持っているものです。

<body onscroll="myFunction()"> 
    <svg id=l ine height="50" width="100%"> 
    <line id = horLine x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" /> 
    </svg> 
</body> 
<script> 
    function myFunction() { 
    (? ? ?) 
    }

私は、このためにはJavaScriptがどうなるか分かりません。

私は変数を作成し、その関数が実行されるたびにその変数値を半分にする必要があると仮定します。

私はそれを把握できないようです。 jQueryのを使用して

出典

2017-09-22 Joe Young

：

var x2 = $('#horLine').attr('x2').slice(0, -1); 
 
// .slice(0, -1) is used to remove the '%' from the attribute 
 

 
$(document).scroll(function() { 
 
    x2 *= 0.99; 
 
    $('#horLine').attr('x2', x2 + '%'); 
 
});;

svg { position: fixed;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="line" height="50" width="100%"> 
 
<line id="horLine" x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
</svg> 
 
<div style="height: 1000000px;"> 
 
</div>

をあなたが効果を見ることができるので、私は、50％が、99％をしませんでした。

あなたがアップ/ダウンスクロールを検出することにより、動作を向上させることができますなど

出典

2017-09-22 21:05:40 jack

彼はjqueryを使用していると仮定します。 – Confuzing

x2が、それはもう少し複雑ですパーセントですが、idで要素を取得することができ、現在の値に基づいて、それを設定した場合x2の

だから、このようになる機能：

var x2 = document.getElementById("horLine").getAttribute("x2").match(/\d+/)[0]/2 + "%"; 
document.getElementById("horLine").setAttribute("x2", x2);

あなたはまた、パーセント記号を削除するにはsubtringの代わりmatchを使用することができます。より効率的であるかどうかはわかりません。

出典

2017-09-22 21:23:34 Confuzing

スクロールでSVGの長さを連続的に減らす

答えて

関連する問題