Dovineowuor/curve-svg-background-animation.markdown

## curve-svg-background-animation.markdown

      
    Raw
  

              curve-svg-background-animation.markdown
            
          
    Curve SVG Background Animation

A Pen by Arman on CodePen.
License.

  
## index.html
<body>
  <div class="svg-container">
    <!-- I crated SVG with: https://codepen.io/anthonydugois/pen/mewdyZ -->
    <svg viewbox="0 0 800 400" class="svg">
      <path id="curve" fill="#50c6d8" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
      </path>
    </svg>
  </div>

  <header>
    <h1>This is a header title</h1>
    <h3>Here you are, scroll down.</h3>
  </header>

  <main>
    <p>And the main section.</p>
  </main>

  <footer>
    <p>And, the footer.</p>
    <small>🕷 Wish you luck, <a href="http://armantaherian.com">Arman</a>.</small>
  </footer>
</body>

## script.js
(function() {
  // Variables
  var $curve = document.getElementById("curve");
  var last_known_scroll_position = 0;
  var defaultCurveValue = 350;
  var curveRate = 3;
  var ticking = false;
  var curveValue;

  // Handle the functionality
  function scrollEvent(scrollPos) {
    if (scrollPos >= 0 && scrollPos < defaultCurveValue) {
      curveValue = defaultCurveValue - parseFloat(scrollPos / curveRate);
      $curve.setAttribute(
        "d",
        "M 800 300 Q 400 " + curveValue + " 0 300 L 0 0 L 800 0 L 800 300 Z"
      );
    }
  }

  // Scroll Listener
  // https://developer.mozilla.org/en-US/docs/Web/Events/scroll
  window.addEventListener("scroll", function(e) {
    last_known_scroll_position = window.scrollY;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        scrollEvent(last_known_scroll_position);
        ticking = false;
      });
    }

    ticking = true;
  });
})();

## style.scss
@import 'https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700';

*, *:after, *:before {
  margin: 0;
  padding: 0;
}

.svg-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

svg {
  path {
    transition: .1s;
  }

  &:hover path {
    d: path("M 800 300 Q 400 250 0 300 L 0 0 L 800 0 L 800 300 Z");
  }
}

body {
  background: #fff;
  color: #333;
  font-family: 'Ubuntu', sans-serif;
  position: relative;
}

h3 {
  font-weight: 400;
}

header {
  color: #fff;
  padding-top: 10vw;
  padding-bottom: 30vw;
  text-align: center;
}

main {
  background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  padding: 10vh 0 80vh;
  position: relative;
  text-align: center;
  overflow: hidden;

  &::after {
    border-right: 2px dashed #eee;
    content: '';
    position: absolute;
    top: calc(10vh + 1.618em);
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 100%;
  }
}

footer {
  background: #dddee1;
  padding: 5vh 0;
  text-align: center;
  position: relative;
}

small {
  opacity: .5;
  font-weight: 300;

  a {
    color: inherit;
  }
}
	<body>
	<div class="svg-container">
	<!-- I crated SVG with: https://codepen.io/anthonydugois/pen/mewdyZ -->
	<svg viewbox="0 0 800 400" class="svg">
	<path id="curve" fill="#50c6d8" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
	</path>
	</svg>
	</div>

	<header>
	<h1>This is a header title</h1>
	<h3>Here you are, scroll down.</h3>
	</header>

	<main>
	<p>And the main section.</p>
	</main>

	<footer>
	<p>And, the footer.</p>
	<small>🕷 Wish you luck, <a href="http://armantaherian.com">Arman</a>.</small>
	</footer>
	</body>
	(function() {
	// Variables
	var $curve = document.getElementById("curve");
	var last_known_scroll_position = 0;
	var defaultCurveValue = 350;
	var curveRate = 3;
	var ticking = false;
	var curveValue;

	// Handle the functionality
	function scrollEvent(scrollPos) {
	if (scrollPos >= 0 && scrollPos < defaultCurveValue) {
	curveValue = defaultCurveValue - parseFloat(scrollPos / curveRate);
	$curve.setAttribute(
	"d",
	"M 800 300 Q 400 " + curveValue + " 0 300 L 0 0 L 800 0 L 800 300 Z"
	);
	}
	}

	// Scroll Listener
	// https://developer.mozilla.org/en-US/docs/Web/Events/scroll
	window.addEventListener("scroll", function(e) {
	last_known_scroll_position = window.scrollY;

	if (!ticking) {
	window.requestAnimationFrame(function() {
	scrollEvent(last_known_scroll_position);
	ticking = false;
	});
	}

	ticking = true;
	});
	})();
	@import 'https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700';

	, :after, *:before {
	margin: 0;
	padding: 0;
	}

	.svg-container {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	}

	svg {
	path {
	transition: .1s;
	}

	&:hover path {
	d: path("M 800 300 Q 400 250 0 300 L 0 0 L 800 0 L 800 300 Z");
	}
	}

	body {
	background: #fff;
	color: #333;
	font-family: 'Ubuntu', sans-serif;
	position: relative;
	}

	h3 {
	font-weight: 400;
	}

	header {
	color: #fff;
	padding-top: 10vw;
	padding-bottom: 30vw;
	text-align: center;
	}

	main {
	background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%);
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	padding: 10vh 0 80vh;
	position: relative;
	text-align: center;
	overflow: hidden;

	&::after {
	border-right: 2px dashed #eee;
	content: '';
	position: absolute;
	top: calc(10vh + 1.618em);
	bottom: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	}
	}

	footer {
	background: #dddee1;
	padding: 5vh 0;
	text-align: center;
	position: relative;
	}

	small {
	opacity: .5;
	font-weight: 300;

	a {
	color: inherit;
	}
	}