wave.js | Simulating Wave Animation with JavaScript

wave.js is a flexible JavaScript plugin for simulating the waves on the surface of water using Vanilla JavaScript and Canvas API. It can allow us to create some very nice wave effect in browser.

How to create wave animation using wave.js?

1.Import wave.js file in html

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

2.Create a wave object with a container, which is a html target element. The wave animation will be displayed in that container.

const waveAnimation = new Wave(container)

3.Configure the wave animation by some options

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'
      
})

4.There are some methods to control the wave animation, such as start, pause and stop.

// start
waveAnimation.animate();
// pause
waveAnimation.pause();
// set options
setOptions(options);
// reset
reset();