Generate Water Waves Using jQuery And Canvas - Waterwave.js

Waterwave.js is a really simple jQuery plugin that helps you generate a smooth, performant, responsive, 'realistic' Water Waves Animation using HTML5 canvas API.

See also:

• Creating Animated Waves Using jQuery and Canvas
• Smooth Wave/Liquid Animation With jQuery, GSAP And SVG

How to use it:

1. Load the latest version of jQuery library and the jQuery Waterwave.js script in your webpage.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.waterwave.js"></script>

2. Create an HTML5 canvas element on which you want to draw the water waves.

<canvas class="waterwave-canvas"></canvas>

3. Initialize the plugin with default options and done.

$(".waterwave-canvas").waterwave();

4. Config the water waves animation with the following options:

$(".waterwave-canvas").waterwave({

  // parent container
  parent : '',

  // color of waves
  color : '#000',

  // or 'down'
  direction: 'up',

  // background color
  background: ''
  
});

---

This awesome jQuery plugin is developed by blockhead123. For more Advanced Usages, please check the demo page or visit the official website.