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?
- 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.