WEBOPIXEL

jQuery+skrollrでスクロールしてSVGの色を変化させる

Posted: 2016.06.16 / Category: javascript / Tag: 

jQueryとskrollrというプラグインを使用して、スクロール量に応じてSVGの色を変化させてみます。

Sponsored Link

背景色の変更

SVGの前に、一番単純なbodyの色を変化させてみます。
jQueryとskrollrを読み込んで、skrollr.initを実行します。

JavaScript

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>
<script>
	(function($) {
		$(function() {
			skrollr.init();
		});
	})(jQuery);
</script>

あとはbodyタグに直接色を変えたい座標と色を指定します。

HTML

<body data-0="background:rgb(130,200,60);"
  data-1000="background:rgb(255,200,120);"
  data-2000="background:rgb(230,170,235);">
</body>

SVGの色の変更

次は簡単な星型のSVGを配置して色を変えてみます。
SVGの塗りつぶしは「fill」を指定します。

HTML

<svg id="svg-bg" viewBox="0 0 102 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g stroke="none" fill="none">
		<polygon
				id="star"
				fill="#F7BD83"
				points="51 79.5 19.8473816 95.8779007 25.7970023 61.1889504 0.594004636 36.6220993 35.4236908 31.5610496 51 0 66.5763092 31.5610496 101.405995 36.6220993 76.2029977 61.1889504 82.1526184 95.8779007"
				data-0="fill:rgb(130,200,60);"
				data-1000="fill:rgb(255,200,120);"
				data-2000="fill:rgb(230,170,235);"></polygon>
	</g>
</svg>

CSSはfixedにすれば固定されて変化具合がわかります。

CSS

#svg-bg {
	width: 600px;
	left: 50%;
	margin-left: -300px;
	position: fixed;
	top: 10%;
	z-index: -1;
}

以上です。すごく簡単にできてしまいましたね。