Generate Water Waves Using jQuery And Canvas - Waterwave.js
File Size: | 3.02 KB |
---|---|
Views Total: | 10596 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.