背景色の変更

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;
}

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