Javascript Wave Animation for Headers & Footers

The Wave.js is a Javascript plugin which provides configurable Wave animation for header and footer. It simulates the waves on the surface of water using vanilla javascript and Canvas API.

The plugin also has options to toggle the animation to stop them on a certain point or keep them running. It gives a nice and cool effect and if you implement on your website, it will give a unique look and feel.

The plugin comes with some of the great features which allow you to control it and customize it as per your need.

1. It allows you to control the number of waves to show.
2. It has the option to control the smoothness of waves.
3. You can set the velocity of waves as per your need.
4. Normally these waves are pointed to the footer and you are allowed to set the height of them.
5. You can set the border of each wave or disable it. If you set the border Ture, you are allowed to see the width of the border.
6. The Wave. js plugin allows you to control the opacity and set the position of waves.

How to Add Wave Animation using Javascript

To add these waves on your website is so easy and all you need to import the Javascript file into the document.

<script src="/path/to/wave.js"></script>

The next thing to initialize the wave animation function and to do so, we need to define container parameter to specify the target element in which all the waves will be generated.

const waveAnimation = new Wave(container)

The plugin already provides you few of great options which you can config the waves animation.

const waveAnimation = new Wave(container,{

  // number of waves
  number: 3,

  // smoothness
  smooth: 50,

  // animation speed
  velocity: 1,

  // height in pixels or percent
  height: .3,

  // color
  colors: ['#ff7657'],

  // border options
  border: {
      show: false,
      width: 2,
      color: ['']
  },

  // opacity 
  opacity: .5,

  // 'top' | 'bottom' | 'left' | 'right'
  position: 'bottom'
  
})