@fabioricali/siriwavejs
Version:
The Siri wave replicated in a JS library.
97 lines (59 loc) • 2.46 kB
Markdown
[](https://gitter.im/CaffeinaLab/SiriWaveJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Have you ever thought on how to get the Siri wave effect on your website or mobile app?
SiriWaveJS is a library that *easily* allows you to get this effect.
**Embed the script... and Surf!**
#### [LIVE EXAMPLE!](http://caffeinalab.github.io/SiriWaveJS)
## Usage
```html
<div id="siri-container"></div>
<script src="/path/to/your/siriwave.js"></script>
<script>
var siriWave = new SiriWave({
container: document.getElementById('siri-container'),
width: 640,
height: 200,
/*
speed: 0.2,
color: '#000',
frequency: 2
*/
});
</script>
```
## Constructor options
#### `style` (String, default: 'none')
* `default` - Default iOS9- style
* `ios9` - Style of for iOS9+
#### `container` (DOM Object)
The DOM container where the `canvas` to draw the wave is added.
#### `[speed]` (Number, from `0` to `1`, default: `0.1`)
The speed of the wave.
#### `[amplitude]` (Number, from `0` to `1`, default: `1`)
The noise (amplitude) of the wave.
#### `[frequency]` (Number, from `0` to `N`, default: `1`)
The frequency of the wave.
**Not available in iOS9 Style**
#### `[color]` (String, Color, default: `#fff`)
The color of the wave, in hexadecimal form (`#336699`, `#FF0`)
**Not available in iOS9 Style**
#### `[cover]` (Boolean, default: `false`)
The `canvas` covers the entire width or height of the container.
#### `[speedInterpolationSpeed]` (Number)
The speed to interpolate the `speed` property.
#### `[amplitudeInterpolationSpeed]` (Number)
The speed to interpolate the `amplitude` property.
## API
#### `start()`
Start the animation
#### `stop()`
Stop the animation.
#### `setSpeed(newValue)`
Set the new value of speed (animated)
#### `setAmplitude(value)`
Set the new value of amplitude (animated)
## Projects/examples that uses this script
* [The Capitol - The Official Government of Panem (Hunger Games Mockingjay Part 1 website)](http://www.thecapitol.pn/)
* [http://blog.kidliaa.com/demo/siri%20wave/](http://blog.kidliaa.com/demo/siri%20wave/ )
## Some math
