https://github.com/devloop01/softripple-js

A small library for creating soft ripple interactions on any webpage
https://github.com/devloop01/softripple-js

Last synced: 13 days ago
JSON representation

A small library for creating soft ripple interactions on any webpage

• Host: GitHub
• URL: https://github.com/devloop01/softripple-js
• Owner: devloop01
• License: mit
• Created: 2020-06-02T19:13:07.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T23:27:48.000Z (almost 2 years ago)
• Last Synced: 2024-08-08T17:29:48.298Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.39 MB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Soft Ripple

![image](https://i.imgur.com/msl0Lti.gif)

A small Javascript library to create soft ripple interaction

Check the demos: [here](https://codepen.io/dev_loop/full/KKVKqrq)

## Installation

You can install softripple-js in your project via npm

```

npm install --save softripple-js

```

Or load the ES module directly

```html

```

## Usage

It's pretty easy to use. Just import the package an declare SoftRipple with the element you want the ripple effect to take place.

```javascript

const rippleEffect = new SoftRipple(el);

```

Also you can add effect to multiple elements at once.

```javascript

const el1 = document.getElementById("el1");

const el2 = document.getElementById("el2");

const rippleEffect = new SoftRipple([el1, el2]);

```

You can also pass in options as the second argument which needs to be an object.

```javascript

const rippleEffect = new SoftRipple(el, { options });

```

## Options

To customize the ripple effect you can use the following properties, and then pass them as an object as the second argument of the constructor.

#### rippleColor

A String representing the color of the ripple. Defaults to the `background-color` of the element.

#### transitionDuration

Duration of the transition in seconds. Default is `0.8s`.

minimum is `0.4` seconds and max is `2` seconds.

#### rippleWidth

Width of the ripple. Defaults to `4`.

minimum is `2` and max is `8`.

#### rippleMaxSize

Maximum size of the ripple. Defaults to `100`.

minimum is `50` and max is `200`.

#### randomSize

Boolean property to set random size of the ripples. Default value is `false`.

#### randomColor

Boolean property to set random color of the ripples. Default value is `false`.

#### overrideDefaults

Boolean property to override the defaults. Default value is `false`.