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!
<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>
default
- Default iOS9- styleios9
- Style of for iOS9+
The DOM container where the canvas
to draw the wave is added.
The speed of the wave.
The noise (amplitude) of the wave.
The frequency of the wave.
Not available in iOS9 Style
The color of the wave, in hexadecimal form (#336699
, #FF0
)
Not available in iOS9 Style
The canvas
covers the entire width or height of the container.
The speed to interpolate the speed
property.
The speed to interpolate the amplitude
property.
Enter a number to throttle requestAnimationFrame using setTimeout. Enter 60 for no throttling.
1 for less smooth curve but better performance. 10 = max smoothness;
Start the animation
Stop the animation.
Set the new value of speed (animated)
Set the new value of amplitude (animated)