Wavy Canvas
Small library which gives you ability to create a wave animation on the <canvas>
.
Includes hidpi-canvas-polyfill
(src) by @jondavidjohn
Can be easily used in AMD / CommonJS / ES6 / legacy environments.
"A picture is worth a thousand words"
Demo
Open http://codepen.io/hinok/pen/xOwrKJ
Usage
Options
You must set at least either selector
or selectorEl
option and radiuses
, duration
options.
var wavy = new Wavy(options);
hexFillColor
, {string}, defaults #ff0000
, optional - Background hex color of waveshexStrokeColor
{string}, defaults inherits from hexFillColor
, optional - Stroke hex color of wavesonlyWaves
{boolean}, defaults false
, optional - Whether should render only waves with transparent background or notradiuses
{Array}, required - Next radiuses of rendered wavesduration
{number}, required - How long waves animation should take in ms (mili seconds)selector
{string}, optional - A selector of a DOM element where <canvas>
should be appended.selectorEl
{Element}, optional - A DOM element where <canvas>
should be appended. Overrides selector
optioncenterWaveSelector
{string}, defaults .js-wavy-center
, optional - A selector of a DOM element which set center (source) of waves. Must be a child of DOM element set by properties: selector
or selectorEl
centerWave
{Object}, optional - An object containing props x
, y
which indicate center of waves. Overrides centerWaveSelector
option.
Regular usage
new Wavy({
hexStrokeColor: '#fff',
radiuses: [10, 20, 30],
duration: 3000,
selector: '.js-dom-element'
});
All options
new Wavy({
hexFillColor: '#fff',
hexStrokeColor: '#fff',
onlyWaves: false,
radiuses: [10, 20, 30],
duration: 5000,
selector: '.js-dom-element',
selectorEl: document.querySelector('.js-other-dom-element'),
centerWave: {
x: 500,
y: 500
},
centerWaveSelector: '.js-child-of-dom-element'
});
For more details look at demo
folder.
ES2015 / ES6
import Wavy from 'wavy-canvas/src/Wavy';
const wavy = new Wavy({
radiuses: [10, 30, 50, 80, 120, 160, 200, 280],
hexFillColor: '#fff',
hexStrokeColor: '#fff',
duration: 4000,
selector: '.js-where-should-I-append-canvas-element'
});
wavy.start();
ES5
var wavy = new window.Wavy({
radiuses: [10, 30, 50, 80, 120, 160, 200, 280],
hexFillColor: '#fff',
hexStrokeColor: '#fff',
duration: 4000,
selector: '.js-where-should-I-append-canvas-element'
});
wavy.start();
Size
Javascript
wavy.js | wavy.js (gzip) | wavy.min.js | wavy.min.js (gzip) |
---|
33.94 KB | 8.64 KB | 16.47 KB | 5.19 KB |
CSS
style.css | style.css (gzip) |
---|
327 B | 205 B |
0.33 KB | 0.21 KB |
Development
npm install
npm start
npm run build
License
MIT