Creating Animated Waves Using jQuery and Canvas

File Size: 3.11 KB
Views Total: 10727
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.

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.