<h1>Scroll for Wave Effect</h1>
<div class="svg-container">
  <svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="8 0 2048 25" enable-background="new 8 0 2048 25" xml:space="preserve"preserveAspectRatio="none">
  <path fill="#008571" d="M1833.1,1.6c-146.3,0-360.7,22.4-527,22.4s-274-10.6-274-10.6S955.4,1.6,809.1,1.6S448.4,24,282,24
    S8,13.4,8,13.4V25h1024h1024V13.4C2056,13.4,1979.4,1.6,1833.1,1.6z"/>
  </svg>
</div>
<div class="bottom">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta leo et elit iaculis aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et justo a purus facilisis ornare ut vitae enim. Vestibulum efficitur lectus nisl, in semper justo laoreet sit amet. Pellentesque imperdiet sapien ac laoreet porta. Sed eu mi fringilla, malesuada odio laoreet, eleifend neque. Sed at imperdiet odio, ac lobortis eros. Nullam est dui, venenatis quis erat ut, tincidunt auctor metus. Nam nulla eros, commodo id malesuada ac, vulputate in tellus. Maecenas consequat odio ut urna elementum facilisis. Mauris pulvinar varius dui sed sagittis. Nunc ac sem nec sem ultrices rhoncus.</p>

<p>Aliquam eget lobortis libero, sit amet faucibus justo. Aliquam erat volutpat. Donec pulvinar aliquam ullamcorper. Nam facilisis, metus ut ultricies aliquet, arcu lorem tincidunt metus, pulvinar faucibus nulla justo eget ante. Cras sapien massa, tincidunt quis velit eget, malesuada aliquam odio. Vestibulum dolor nisi, bibendum sit amet auctor id, molestie ac felis. Proin consectetur odio ante, ut auctor libero molestie at. Suspendisse vel ultricies est. Maecenas turpis tortor, molestie quis ultrices eu, cursus rutrum nunc. Duis at quam efficitur, pellentesque est a, vestibulum velit. Duis id porttitor erat. Donec fermentum augue ut mauris accumsan, ut porttitor lorem ultricies. Curabitur et suscipit odio.</p>

<p>Proin sed dignissim sem, vitae blandit nisi. Quisque suscipit tellus non ipsum pretium, hendrerit scelerisque erat pretium. Nunc hendrerit pulvinar sem, sed scelerisque turpis feugiat ac. Cras malesuada diam eu purus posuere auctor. Morbi bibendum fringilla metus a lobortis. Ut eros eros, commodo id dictum ut, convallis at metus. Duis mattis mauris eget vehicula vestibulum. Phasellus pellentesque, ex nec accumsan aliquet, metus quam luctus magna, porttitor pulvinar sem neque sed arcu. Aliquam et sem nec nunc consequat eleifend non a risus. Donec tempus risus et porta congue. Integer sed facilisis lorem, quis fermentum orci.</p>
</div>

$bgColor: #008571;

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  background: url('http://images8.alphacoders.com/370/370799.jpg');
  background-size: 250vh;
  background-attachment: fixed;
  
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #fff;
}

h1 {
  text-align: center;
  font-size: 10vh;
  text-shadow: 0 .5vh 1vh rgba(0,0,0,.5);
  margin-top: 30vh;
  margin-bottom: 10vh;
}

.svg-container {
  overflow: hidden;
}

div.bottom {
  background: $bgColor;
  // height: calc(100% - 8vh);
  padding: 60px 0;
  
  p {
    font-size: 18px;
    max-width: 600px;
    line-height: 1.5;
    margin: 0 auto 32px;
  }
}

svg {
  display: block;
  width: 200%;
  position: relative;
  left: 0px;
  height: 8vh;
}

svg path {
  fill: $bgColor;
}

(function() {

  var viewWidth, xPos;

  viewWidth = -1 * $(window).width();
  xPos = 0;

  $(document).on('scroll', function() {

    if (xPos > viewWidth) {
      xPos -= 20;
    } else {
      xPos = 0;
    }

    $('#svg').css('left', xPos);
  });

}());

////////////////////
// Automate Animation
////////////////////

(function() {

  var obj, scrollToThis, interval;

  obj = $('body');
  scrollToThis = obj.height();

  function scroll(callback) {

    obj.animate({
      scrollTop: 0
    }, 2000);
  }
  
  obj.scrollTop(obj.height());
  scroll();

}());