Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Ramotion/aquarelle

:octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion
https://github.com/Ramotion/aquarelle

javascript

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/Ramotion/aquarelle
Owner: Ramotion
License: mit
Created: 2016-07-04T13:30:24.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2019-10-20T16:55:31.000Z (about 5 years ago)
Last Synced: 2024-10-16T05:22:37.640Z (about 2 months ago)
Topics: javascript
Language: JavaScript
Homepage: https://www.ramotion.com/agency/web-design/
Size: 10.4 MB
Stars: 1,805
Watchers: 50
Forks: 108
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

fucking-awesome-web-effect - aquarelle - Aquarelle is a watercolor effect component. (🚀 A series of exquisite and compact web page cool effects / Other Effect)
awesome-web-effect - aquarelle - Aquarelle is a watercolor effect component. (🚀 A series of exquisite and compact web page cool effects / Other Effect)

README

        [![Header](./header.png)](https://www.ramotion.com/agency/app-development?utm_source=gthb&utm_medium=special&utm_campaign=aquarelle)

[![preview](./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&utm_medium=referral&utm_content=Ramotion/aquarelle&utm_campaign=Badge_Grade)

[![Bower](https://img.shields.io/bower/v/aquarelle.svg)]()

[![Twitter](https://img.shields.io/badge/[email protected]?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.


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.


**Looking for developers for your project?**


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

```

## API

### Constructor

`new Aquarelle(textureImage, maskImage[, options]);`

| Names | Required | Type | Description

| --- | --- | --- | ---

| textureImage | `true` | `string`, `Image` or `` | background image

| maskImage | `true` | `string`, `Image` or `` | 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.

 



 









Follow us for the latest updates