svg animation

스크롤 이벤트

by Kim Ara

HTML

<p>스크롤을 내려보세용!</p>
<div id="svgWrap">
		<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
			 y="0px" width="100%" height="100%" viewBox="0 0 824.514 418.25" enable-background="new 0 0 824.514 418.25"
			 xml:space="preserve">
			<g>
			<path class="st0"...

CSS

*{margin:0;padding:0}
body{background:#fff;width:100%;height:2000px}
p{position:fixed;top:0;left:0;}
#svgWrap svg{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;width:30%}
#svgWrap .st0{fill:none;stroke:#00ff97; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; }

JavaScript

var $doc = $(document),
		$win = $(window),
		$svg = $("svg"), 
		max = $doc.height() - $win.height();

	//스크롤 시 
	$win.on("scroll", function(){
		var p = $win.scrollTop() / max;
		$svg.drawsvg("progress", p);
	});


	// 바로 애니메이션
	var $svg = $('svg').drawsvg({
		  duration: 3000,
		  easing: 'linear'
		  //reverse: true
		});

	//$svg.drawsvg('animate');