Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitaliy-bobrov/es2015-ripple
ES2015 ripple effect
https://github.com/vitaliy-bobrov/es2015-ripple
es2015 material-design ripple
Last synced: 8 days ago
JSON representation
ES2015 ripple effect
- Host: GitHub
- URL: https://github.com/vitaliy-bobrov/es2015-ripple
- Owner: vitaliy-bobrov
- License: mit
- Created: 2016-03-22T09:30:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-01T22:13:01.000Z (almost 8 years ago)
- Last Synced: 2024-10-10T22:33:26.648Z (about 1 month ago)
- Topics: es2015, material-design, ripple
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ES2015 Ripple
==============[![Bower version](https://badge.fury.io/bo/es2015-ripple.svg)](https://badge.fury.io/bo/es2015-ripple)
A pure javascript (no polymer, no jQuery) lightweight library that adds a Google Material Design ripple effect to elements.
## Bower
```bash
bower install --save es2015-ripple
```## Usage
Include the script in your HTML
```html
```Also you can import SASS styles into your own and compile with your configuration.
```css
@import 'bower_components/es1025-ripple/ripple';
```
### Available SASS configuration variables:
- $ripple-effect-color - Effect color, default `#fff`
- $ripple-effect-time - Effect timing, default `0.45s`
- $ripple-effect-initial-opacity - Effect starting opacity, default `0.4`
- $ripple-effect-scale - Effect max ink scale, default `2.5`In your own SASS files you can redeclare any of this variables to change defaults. Use `!default` keyword after variable declaration.
Example: `$ripple-effect-time: .5s !default;` - This will change default effect time to 500ms.Then add `ripple` class to target element
```html
Ripple!
```Also you can directly change effect color with data-attribute `data-ripple-color`, whitch can use any valid CSS color value.
```html
Ripple!Ripple!
```