xiaolinhanfeng / touchmyripple Goto Github PK

View Code? Open in Web Editor NEW

A simple library for apply the ripple effect where you want, obviously in vanillaJS 😉

License: GNU General Public License v3.0

JavaScript 100.00%

touchmyripple's Introduction

touchMyRipple

touchMyRipple ( tmripple for short ) is a simple library that integrate ripple effect in your fantastic site!
Demo & Documentation

Installation

Download Build

<script src="myDirectory/touchMyRipple.js"></script>

npm install touchmyripple --save

Methods

init(settings[Object])

This method enables ripple effect to all the elements that have the attribute data-animation="ripple".
All the following options are optional

settings[Object]

{
    // area is an option to make data-animation more specific
    area: 'class, id',

    // color...🤔 
    color: 'rgba, hex, hsla', 

    // pass the scrolling element if it's not window
    offsetEl: 'class, id',

    // this option accept an event listener 
    eventListener: 'event'
}

attachToSelectors(settings[Object])

This method enables ripple effect to all the elements that match the class passed in 'selectors'

settings[Object]

    {
        // selector of the element you want to attach the ripple ( is required )
        selectors: 'class, id',

        // color...🤔🤔🤔🤔🤔🤔
        color: 'rgba, hex, hsla',

        // pass the scrolling element if it's not window
        offsetEl: 'class, id',

        // this option accept an event listener 
        eventListener: 'event'
    }

Basic Usage

index.js

import tmripple from 'touchmyripple';

tmripple.init({
    color: '#bada55', // default is 'rgba(255, 255, 255, 0.4)'
    eventListener: 'touchstart' // default is 'click'
});

tmripple.attachToSelectors({
    selectors: '#foo .bar [type=button]',
    color: 'rgba(0, 0, 0, 0.4)',
    eventListener: 'mousedown'
});

Recommend Projects