以前、パスに沿って描写されていくSVGアニメーションを、
プラグインなしで実装しました。
[プラグインなしで作るSVGアニメーション その1]
(https://qiita.com/kfunnytokyo/items/3102196d2355f575f91e)
今度はスクロールで描写するようにしてみます!
See the Pen Svg Scroll Event by kayukihashimoto (@kfunnytokyo) on CodePen.
#事前準備
- SVGデータの作成
- SVGデータをテキストエディタで開く
- htmlに直接貼り付ける
- pathにclass名を付与(今回はitem)
html
<body>
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.92 69.26" class="svg">
<g>
<path class="item" d="M18.67,50.54a13.22,13.22,0,0,0,2.48,6.68q3.39,4,11.6,4a25,25,0,0,0,8-1.06q5.82-2,5.82-7.56a5.57,5.57,0,0,0-2.85-5,31,31,0,0,0-9-3.05L27.61,43q-10.4-2.3-14.29-5-6.59-4.51-6.59-14.1A18.73,18.73,0,0,1,13.18,9.38q6.45-5.79,18.93-5.79Q42.54,3.59,49.9,9T57.62,24.9H44.53a9.33,9.33,0,0,0-5.26-8.36,18,18,0,0,0-8.11-1.64A15.44,15.44,0,0,0,22.55,17,6.71,6.71,0,0,0,19.33,23a5.59,5.59,0,0,0,3.17,5.22q2,1.15,8.66,2.7l11.44,2.7q7.52,1.77,11.27,4.73,5.83,4.6,5.83,13.31A18.7,18.7,0,0,1,52.8,66.44q-6.9,5.9-19.51,5.9-12.87,0-20.25-5.81t-7.37-16Z" transform="translate(-5.42 -3.34)"/>
<path class="item" d="M107.39,5.49h14.15L99.32,70.66H86.45l-22-65.17H79L93.11,55Z" transform="translate(-5.42 -3.34)"/>
<path class="item" d="M173.47,25.83a12.76,12.76,0,0,0-7.56-9.33A18.57,18.57,0,0,0,158.43,15,16.24,16.24,0,0,0,145.5,21q-5.06,5.94-5.06,17.85t5.48,17a18,18,0,0,0,12.47,5,16.17,16.17,0,0,0,11.23-3.93A17,17,0,0,0,175,46.56H159.94V35.69h27.15v35h-9l-1.37-8.14A31.18,31.18,0,0,1,169.62,69a25,25,0,0,1-13.26,3.3q-13,0-21.22-9-8.62-9-8.62-24.66,0-15.82,8.71-25.36t23-9.54q12.42,0,20,6.3a23.43,23.43,0,0,1,8.64,15.72Z" transform="translate(-5.42 -3.34)"/>
</g>
</svg>
</div>
</body>
#事前準備 その2
パスの太さや長さ、破線の開始位置を指定します。
css
.item {
fill: transparent;
stroke: #999;
stroke-width: 1;
stroke-miterlimit:10;
stroke-dasharray: 600; // 破線の長さをパスの長さに合わせる。
stroke-dashoffset: 600; // 開始位置を破線の長さに合わせる。
}
#今回使ったSVG属性
- fill グラフィックの内部の色
- stroke アウトラインの色を定義する
- stroke-width アウトラインの太さ。デフォルトは1
- stroke-linejoin 角の形状miter,round,bevel
- stroke-dasharray 破線の長さ
- stroke-dashoffset 破線の開始位置
#スクロールで描写する処理
準備が出来たら、
スクロールでパスを描写する処理を追加します。
javascript
$(function(){
var $target = $('.item');
$(window).on('scroll', function(){
var scroll = $(window).scrollTop(),
dashoffset = 600; // stroke-dasharrayと同じ値にする
if(scroll < dashoffset) {
$target.css({
'stroke-dashoffset': dashoffset - scroll
});
};
});
});
パスは、dashoffsetで指定した破線の開始位置によって、
表示される範囲が決まるので、
最初に設定したstroke-dasharrayと同じ値にすればパスは表示されず、
値を0にすればパスは全て表示されます。
この仕組みを使って、
スクロールのたびにdashoffset値からスクロール値を引いていけば、
どんどんパスが描写されていくように見えますね！
#完成!
See the Pen Svg Scroll Event by kayukihashimoto (@kfunnytokyo) on CodePen.
*パスの長さは正確ではありません。
今回はパスの長さを超えるように、大まかに設定しています。
正確なパスの長さはgetTotalLength()を使って取得出来ます。
詳しくはこちらから
おわり。