aquarelle

KO | EN

gitlite — search

#python #hacktoberfest #typescript #android #machine-learning #deep-learning #linux #docker #java #kubernetes #awesome-list #security #ios #open-source

(★ 1,823)

:octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

File Explorer

Download Latest Version (.zip)

- - bg.png
  - icon01.png
  - icon02.png
  - icon03.png
  - jobs.jpg
  - logo.png
  - mask.png
  - mouse.svg
  - splash.png
  - title.png
  - top_menu.png
- bower.json
- example_scroll.html
- index.html
- web__transition__effect_ramotion.gif
.gitignore
.travis.yml
Aquarelle.js
AquarellePass.js
bower.json
deploy-to-gh-pages.sh
header.png
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Header](https://raw.githubusercontent.com/Ramotion/aquarelle/master/header.png)](https://www.ramotion.com/agency/app-development?utm_source=gthb&utm_medium=special&utm_campaign=aquarelle)
[![preview](https://raw.githubusercontent.com/Ramotion/aquarelle/master/Screenshots/web__transition__effect_ramotion.gif)](https://ramotion.github.io/aquarelle/)

# Aquarelle
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a2d54fa890b84f538be1bc9349dc5121)](https://www.codacy.com/app/juri-v/aquarelle?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=Ramotion/aquarelle&amp;utm_campaign=Badge_Grade)
[![Bower](https://img.shields.io/bower/v/aquarelle.svg)]()
[![Twitter](https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat)](http://twitter.com/Ramotion)
[![Travis](https://img.shields.io/travis/Ramotion/aquarelle.svg)](https://travis-ci.org/Ramotion/aquarelle)
[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/Ramotion)

## About
This project is maintained by Ramotion, Inc.<br>
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.<br>

**Looking for developers for your project?**<br>
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

## Browser support

* Chrome
* Safari
* Opera
* Firefox
* IE 11

## Installation

`bower install aquarelle`

Then insert in your html:

```html
<script src="bower_components/three.js/build/three.js"></script>

## API

### Constructor

`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

### 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

### Events

| 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

### Methods

| 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`)

## Usage

≈

```javascript
var aquarelle = new Aquarelle(textureImage, maskImage[, options]);
```

##### Listeners

```javascript
function listener(event) {}

aquarelle.addEventListener('created', listener);

aquarelle.removeEventListener('created', listener);
```
##### Demos

[Static demo](http://ramotion.github.io/aquarelle)

[Dynamic demo](https://ramotion.github.io/aquarelle/example_scroll.html)

## Licence

Aquarelle is released under the MIT license.
See [LICENSE](./LICENSE) for details.

# Get the Showroom App for iOS to give it a try
Try our UI components in our iOS app. Contact us if interested.

<a href="https://itunes.apple.com/app/apple-store/id1182360240?pt=550053&ct=aquarelle&mt=8" > 
<img src="https://github.com/ramotion/gliding-collection/raw/master/app_store@2x.png" width="117" height="34"></a>
<a href="https://www.ramotion.com/agency/app-development?utm_source=gthb&utm_medium=repo&utm_campaign=aquarelle"> 
<img src="https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png" width="187" height="34"></a>
<br>
<br>
Follow us for the latest updates 
<br>

aquarelle

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

aquarelle

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README