Animated Curved Header using SVG And CSS

Animated Curved Header using SVG And CSS
Code Snippet:Curve SVG Background Animation
Author: Arman
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 1,321
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a visually appealing animated curved header for your webpage. It utilizes SVG and CSS to achieve this effect. As you scroll down the page, the header’s curve changes dynamically, giving your website an engaging visual element. This code is helpful for enhancing your website’s aesthetics and making it more engaging to users.

It adds a unique design element that can captivate visitors. You can use this code on your website’s homepage or landing page to create an eye-catching and interactive header.

How to Create Animated Curved Header Using Svg And CSS

1. Start by creating the basic HTML structure for your webpage. Here’s a simplified example:

Inside the <div class="svg-container">, insert an SVG element with a curved path. You can adjust the path’s shape and color as needed.

<div class="svg-container">
    <svg viewbox="0 0 800 400" class="svg">
      <path id="curve" fill="#4e5ea6" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
      </path>
    </svg>
  </div>

  <header class="curved-header">
    <h1>Animated Curved Header</h1>
    <h3>Here you are, scroll down.</h3>
  </header>

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

2. Now, let’s style our webpage using CSS. You can either link an external CSS file or include it internally in your HTML. Here’s a sample CSS code:

@import 'https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700';
*, *:after, *:before {
  margin: 0;
  padding: 0;
}
.cd__main{
  position: relative;
  display: block !important;
}
.svg-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

svg path {
  transition: 0.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;
}

.curved-header{
  color: #fff;
  padding-top: 10vw;
  padding-bottom: 30vw;
  text-align: center;
  position: relative;
  z-index: 2;
}

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: 0.5;
  font-weight: 300;
}
small a {
  color: inherit;
}

3. To animate the header curve on scroll, include the JavaScript code provided in your HTML, preferably just before the closing </body> tag. This code listens to scroll events and adjusts the curve accordingly.

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

Feel free to customize the content inside the header, main section, and footer to match your website’s needs. You can also fine-tune the CSS styles to achieve your desired look and feel.

That’s all! hopefully, you have successfully created an Animated Curved Header using SVG and CSS. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X