https://github.com/bezenson/meeink

Material Design click effect
https://github.com/bezenson/meeink

bower click css-animations demo effect effects ink jquery jquery-plugin material npm-package plugin

Last synced: about 2 months ago
JSON representation

Material Design click effect

• Host: GitHub
• URL: https://github.com/bezenson/meeink
• Owner: bezenson
• License: mit
• Created: 2016-01-27T11:29:10.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-30T19:00:17.000Z (almost 9 years ago)
• Last Synced: 2024-11-15T07:37:23.167Z (2 months ago)
• Topics: bower, click, css-animations, demo, effect, effects, ink, jquery, jquery-plugin, material, npm-package, plugin
• Language: JavaScript
• Size: 7.81 KB
• Stars: 33
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE.MD

Awesome Lists containing this project

README

        
# MeeInk v1.0.0

MeeInk is a jQuery plugin which allows you to easily add **material design** ink effect to elements when you click them.

Plugin is based on CSS animation what give you good performance including mobile devices.

## Demo

Check out demo page [here][demo].

[demo]: http://inferusvv.github.io/meeink/index.html

## Setup

### Install with Bower

```sh

bower install MeeInk --save

```

### Install with NPM

```sh

npm install meeink --save

```

### Include scripts

```html

```

### Include styles

```html

```

### Initialize plugin

```javascript

$(document).ready(function() {

    $('.btn').meeInk({

        // options

    });

});

```

## Documentation

Plugin have several number of options which allows you to customize it as you want.

#### animationClass

```javascript

animationClass: 'mee-ink-animated mee-ink-animation'

```

Class which triggers to start CSS animation.

#### elementClass

```javascript

elementClass: 'mee-ink-el'

```

Class that is added to initialized element.

#### inkClass

```javascript

inkClass: 'mee-ink'

```

Class for ink inside element with styles.

#### overflowHiddenClass

```javascript

overflowHiddenClass: 'mee-ink-overflow-hidden'

```

Class will be added if your element don't have ```overflow: hidden```.

#### positionRelativeClass

```javascript

positionRelativeClass: 'mee-ink-pos-relative'

```

Class will be added if your element have ```position: static```, because ink inside element positioned absolutely relative to element.

## Issues

Found an issue? You are welcome [here][issues].

[issues]: https://github.com/inferusvv/MeeInk/issues