Animated Header Background Using Jquery & Canvas

Looking for the nice effect to create an animated header background using Jquery & Canvas? This is pretty awesome and simple particularly effect inspired by space networks.

Inside of adding simple general background color for header of your website, Why not make it’s background animated with this particular effect.

This is an awesome animation for your site header background. If you want to build something unique for the header of your site then it will help you to achieve this purpose.

The header is large with the page title and has a nice space background image. The network animation follows the mouse pointer to move around the header.

When the user moves the cursor over the header background, The network animation moves around the cursor which provides the stunning effect.

How to Create Animated Header Background

It’s coded with different Js logic. It consists of different shapes which handle through robust requestAnimationFrame() API an HTML canvas.

The implementation is quite easy. All you need to add the following three of Js files into your webpage before closing the header element.

<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/TweenLite.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/EasePack.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/demo.js'></script>

Next, We need to take care of markup. You need to add the following HTML to implement.

<div class="container demo">
   <div class="content">
      <div id="large-header" class="large-header">
         <canvas id="demo-canvas"></canvas>
         <h1 class="main-title"><span class="thin">Explore</span> Space</h1>
      </div>
   </div>
</div>

The Style

Finally, We will apply some styling to make the header look nice. We will define a background and make the title look nice and clean.

.large-header {
   position: relative;
   width: 100%;
   background: #111;
   overflow: hidden;
   background-size: cover;
   background-position: center center;
   z-index: 1;
}
.demo .large-header {
   background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/demo-bg.jpg");
}
.main-title {
   position: absolute;
   margin: 0;
   padding: 0;
   color: #F9F1E9;
   text-align: center;
   top: 50%;
   left: 50%;
   -webkit-transform: translate3d(-50%, -50%, 0);
   transform: translate3d(-50%, -50%, 0);
}
.demo .main-title {
   text-transform: uppercase;
   font-size: 4.2em;
   letter-spacing: 0.1em;
}
.main-title .thin {
   font-weight: 200;
}
@media only screen and (max-width: 768px) {
   .demo .main-title {
      font-size: 3em;
   }
}

You are done!