JavaScript CSS Curve SVG Header Background Animation

by Posted on

JavaScript CSS Curve SVG Header Background Animation- If you want to place some fancy header on your website then you must look this clean animated header design made using html, css and JavaScript, whenever user scroll page down and up it makes header shape in curve which looks crazy.

Javascript CSS Curve SVG Header Background Animation

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>
    And the main section.
  </main>
 
  <footer>
    And, the footer.
 
  </footer>
</body>


CSS

@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;
}
svg: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, 0.2);
  padding: 10vh 0 80vh;
  position: relative;
  text-align: center;
  overflow: hidden;
}
main::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;
}
small a {
  color: inherit;
}


JS

<script>
(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;
  });
})();
 
</script>

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by armantaherian. Visit their official repository for more information and follow for future updates.

Published by admin