Creating Animated Waves Using jQuery and Canvas

Waves is a jQuery plugin that makes use of Html5 canvas to draw animated & customizable waves at a certain animation speed. Good for creating cool wavy border or background for your container.

Basic Usage:

1. Load the jQuery waves plugin after loading jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.waves.js"></script>

2. Create an empty element you wish to place the animated waves.

<div id="wavy"></div>

3. Initialize the plugin and set the options.

$(document).ready(function(){
$("#wavy").wavyGravy({
redrawInterval: (1000.0 / 60.0),
amplitude: 7,
topOffset: 0,
detailAmplitude: 2,
phaseIncrement: 2,
color: '#ffff00'
});
});

3. Make your canvas waves and body to be the same color for better experience.

body {
background-color: #ffff00;
}

---

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