Animated Waves Header Using Javascript and Canvas

Do you want to stylize your website header? Let’s implement this animated waves Javascript plugin to give a new and fresh look to your website.

This plugin is built with Javascript and Canvas which provide colorful waves at the bottom of the website header. The header is always an important part of the website and it should be looking nice and unique to grab the user attention.

If you are working on a project where you want to add something unique then try out this plugin and give a new look to your website.

It’s quite easy to implement on any kind of website. All you have to add the plugin file and some of HTML/CSS required to build it.

How to Create Animated Waves Header

Let’s download the plugin and find out waves.js and waves.cssfile and add into your site webpage.

<link rel="stylesheet" type="text/css" href="waves.css" />
<script type="text/javascript" src="waves.js"></script>

The next thing is HTML which is simple and easy to understand. First of all, you need to define a div for the header and add a class header. Just Like that.

<div class="header">
  <h1>Animated waves...</h1>
</div>

Now we need to implement the waves and to implement this, you need to define a parent div with class name canvas-wrap and place canvas HTML5 element inside it.

<div class="canvas-wrap">
  <canvas id="canvas"></canvas>
</div>

The last thing is about the content area which can be defined as follows.

<div class="content">
  <h1>Animated waves...</h1>
</div>

That’s it. In core JavaScript file you can change the values of height, nodes, and color to customize it as per your need.

var nodes = 20;
var waveHeight = 60;
var colours = ["#f80000","#00f800","#0000f8"];