Skip to content
Permalink
Browse files

Refactor using class, ES6 and rollup build

  • Loading branch information
kopiro committed Oct 3, 2018
1 parent 920bf4f commit b4ef38aef4375497960d3539477ed3fd4215daff
Showing with 6,414 additions and 534 deletions.
  1. +7 −0 .babelrc
  2. +1 −0 .gitignore
  3. +0 −21 LICENSE
  4. +20 −17 README.md
  5. +305 −0 dist/siriwave.cjs.js
  6. +303 −0 dist/siriwave.esm.js
  7. +399 −0 dist/siriwave.umd.js
  8. +50 −88 index.html
  9. +4,968 −0 package-lock.json
  10. +19 −4 package.json
  11. +40 −0 rollup.config.js
  12. +0 −297 siriwave.js
  13. +65 −0 src/curve.js
  14. +76 −0 src/ios9curve.js
  15. +161 −0 src/siriwave.js
  16. +0 −33 test.html
  17. +0 −51 tests/basic-with-audiosources.html
  18. +0 −11 tests/basic.html
  19. +0 −12 tests/basic9.html
@@ -0,0 +1,7 @@
{
"presets": [
[
"@babel/preset-env"
]
]
}
@@ -0,0 +1 @@
node_modules/
21 LICENSE

This file was deleted.

@@ -1,30 +1,29 @@
![image](https://s3.amazonaws.com/f.cl.ly/items/2r2i3p2G262M271N0F2M/siri.gif)

[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/CaffeinaLab/SiriWaveJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
# SiriWaveJS

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!**
SiriWaveJS is a library that _easily_ allows you to get this effect.

#### [LIVE EXAMPLE!](http://kopiro.github.io/siriwavejs)
### [Live example](http://kopiro.github.io/siriwavejs/)

## Usage

Download the dist file under **./dist/siriwave.umd.js**,
and include in your web page as a script.

```html
<script src="siriwave.umd.js"></script>
```

Create a div container and instantiate a SiriWave object

```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>
```
@@ -33,8 +32,8 @@ var siriWave = new SiriWave({

#### `style` (String, default: 'none')

* `default` - Default iOS9- style
* `ios9` - Style of for iOS9+
- `default` - Default iOS9- style
- `ios9` - Style of for iOS9+

#### `container` (DOM Object)

@@ -75,21 +74,25 @@ 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/ )
- [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

0 comments on commit b4ef38a

Please sign in to comment.
You can’t perform that action at this time.