This project is maintained by Ramotion, Inc.
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.
Looking for developers for your project? [▶︎CONTACT OUR TEAM◀︎]
- Chrome
- Safari
- Opera
- Firefox
- IE 11
bower install aquarelle
Then insert in your html:
<script src="bower_components/three.js/build/three.js"></script>
<script src="bower_components/aquarelle/Aquarelle.js"></script>
<script src="bower_components/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="bower_components/three.js/examples/js/postprocessing/ClearPass.js"></script>
<script src="bower_components/aquarelle/AquarellePass.js"></script>
<script src="bower_components/three.js/examples/js/postprocessing/ShaderPass.js"></script>
<script src="bower_components/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="https://bl.ocks.org/mbostock/raw/4241134/d3.geom.contour.min.js"></script>new Aquarelle(textureImage, maskImage[, options]);
| Names | Required | Type | Description |
|---|---|---|---|
| textureImage | true |
string, Image or <img> |
background image |
| maskImage | true |
string, Image or <img> |
background image mask |
| options | false |
object |
initial options |
| Names | Defaults | Description |
|---|---|---|
| fromAmplitude | 50 |
initial noise amplitude value |
| toAmplitude | 0 |
final noise amplitude value |
| fromFrequency | 8 |
initial noise frequiency |
| toFrequency | 7 |
final noise frequiency |
| fromOffset | -30 |
initial mask size |
| autoplay | false |
true - start animation before first frame is being rendered |
| loop | false |
true - repeat animation in loop |
| duration | 8000 |
animation duration |
| Names | Description |
|---|---|
| created | triggered before first frame is rendered |
| changed | triggered before rendering of a frame |
| completed | triggered before latest frame is rendered |
| started | triggered before animation is started |
| played | triggered after animation is started |
| paused | triggered before pause of animation |
| stopped | triggered before reset of animation |
| Names | Description |
|---|---|
pause() |
pause animation |
play() |
start animation |
stop() |
stop and reset animation |
start() |
start animation over |
reverse() |
reverse animation |
reset() |
re-render frame |
setOptions([object]) |
set animation options |
transitionInRange(startValue, endValue[, startTimeMS[, endTimeMS]]) |
return value between startValue..endValue in range startTimeMS..endTimeMS |
addEventListener(type, listener) |
add listener (listener) of event (type) |
removeEventListener(type, listener) |
remove (listener) of event (type) |
≈
var aquarelle = new Aquarelle(textureImage, maskImage[, options]);function listener(event) {}
aquarelle.addEventListener('created', listener);
aquarelle.removeEventListener('created', listener);Aquarelle is released under the MIT license. See LICENSE for details.
