https://github.com/nash403/ribble

Material ripple effect with ease (Vanilla js, works also as a Vue.js directive)
https://github.com/nash403/ribble

material ripple ripple-effect vanilla vue

Last synced: 3 months ago
JSON representation

Material ripple effect with ease (Vanilla js, works also as a Vue.js directive)

• Host: GitHub
• URL: https://github.com/nash403/ribble
• Owner: nash403
• License: mit
• Created: 2018-02-09T13:33:38.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-22T14:15:11.000Z (almost 7 years ago)
• Last Synced: 2023-12-24T13:03:22.693Z (about 1 year ago)
• Topics: material, ripple, ripple-effect, vanilla, vue
• Language: JavaScript
• Size: 43 KB
• Stars: 4
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ribble

> Material ripple effect with ease (Vanilla js, works also as a Vue.js directive)

## Install

This package is available on npm.

Using npm:

`npm install --save ribble`

Using yarn:

`yarn add ribble`

For browser, import `node_modules/ribble/dist/ribble.js` in your html.

## Example

[Live Demo](#) (TODO)

With Vue.js as a directive:

```html

  A button

  A button

  A button

```

In Vanilla js, after the DOMContentLoaded event:

```javascript

Ribble.attachEvent(el, options, triggers)

// triggers can be an event or an array of events (ex: mouseenter, doubleclick, etc). It will default to ['mousedown', 'touchstart']

// NOTE: for the mousedown event, it will only listen for the left button.

```

### Options

The default options are:

```js

{

  duration: 400, // transition duration

  zIndex: "9999",

  bgColor: "currentColor",

  maxOpacity: "0.4", // the opacity will change from '0.2' to maxOpacity and then to '0'

  easing: "cubic-bezier(0.4, 0, 0.2, 1)" // css easing

}

```