Flexible Configurable Waves Animation In Vanilla JavaScript – wavejs

Category: Animation , Javascript , Recommended | February 16, 2019
Author: QiShaoXuan
Views Total: 168
Official Page: Go to website
Last Update: February 16, 2019
License: MIT

Preview:

Flexible Configurable Waves Animation In Vanilla JavaScript – wavejs

Description:

wavejs is a flexible, configurable JavaScript plugin to simulate the waves on the surface of water using Vanilla JavaScript and Canvas API.

See also:

How to use it:

Import the main JavaScript file wave.js into the document.

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

Initialize the wavejs library to generate a basic waves animation. The container parameter is used to specify the target element in which the waves animation will generate.

const waveAnimation = new Wave(container)

Config the waves animation by passing the following options object as the second parameter to the Wave function.

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

API methods.

// start
waveAnimation.animate();

// pause
waveAnimation.pause();

// set options
setOptions(options);

// reset
reset();

You Might Be Interested In:


Leave a Reply