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.
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>
var nodes = 20; var waveHeight = 60; var colours = ["#f80000","#00f800","#0000f8"];