Efecto de ondulación de material en Vanilla JavaScript-Ripplet. js

Vista prévia

Descripción

Ripplet. js es una biblioteca de JavaScript ligera Vanilla que aplica los efectos de ondulación material Design inspirado a cualquier elemento que utilice propiedades CSS. Escrito en Typescript.

Características

• Altamente personalizable.
• Ligero. Menos de 3Kb.
• Animación configurable.
• Elementos de desencadenador personalizados.

¿Cómo funciona?

Instálelo a través de NPM o incluya el código JavaScript compilado directamente en el documento.

# NPM
$ npm ripplet.js --save

import ripplet from 'ripplet.js';

<!-- OR -->
<script src="ripplet-declarative.min.js"></script>

Configuración con marcado en línea.

<button data-ripplet>Default</button>
<button data-ripplet="color: rgba( 64, 192, 255, .2); spreading-duration: 2s; clearing-delay: 1.8s;">Sky Blue Slow</button>

Configuración con JavaScript.

• targetSuchAsMouseEvent: {currentTarget: Element, clientX: número, clientY: Number}
• Opciones: una serie de opciones como se introdujo a continuación

ripplet(targetSuchAsMouseEvent, options)

Todas las opciones posibles con valores predeterminados.

{

className:







'',

color:









'rgba(0, 0, 0, .1)',

opacity:








null,

spreadingDuration:



'.4s',

spreadingDelay:




 '0s',

spreadingTimingFunction:
'linear',

clearingDuration:



 '1s',

clearingDelay:





'0s',

clearingTimingFunction:
 'ease-in-out',

centered:







 false,

appendTo:







 'body'
}

Registro de cambios

v0.1.13 (06/24/2018)

• arreglar la coordenada ripplet anexando al padre que es un Flexbox