Material design风格点击波特效js插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

ripplet.js是一款Material design风格点击波特效js插件。通过ripplet.js插件，你可以制作并控制点击波效果，生成自己风格的点击波特效。

安装

可以通过nmp来安装ripplet.js插件。

$ npm install ripplet.js

使用方法

在页面中引入ripplet.js文件。。

<script type="text/javascript" src="js/ripplet.js"></script>

HTML结构

以一个按钮为例来制作点击波特效，HTML结构如下：

<!--默认的点击波效果-->
<button data-ripplet>Default</button>
<!--带参数的点击波效果-->
<button data-ripplet="color: rgba( 64, 192, 255, .2); spreading-duration: 2s; clearing-delay: 1.8s;">天空蓝</button>

初始化插件

也可以通过js的方法来对插件进行初始化。

ripplet(targetSuchAsMouseEvent, options)
//targetSuchAsMouseEvent: { currentTarget: Element, clientX: number, clientY: number }
//options: 配置参数

配置参数

ripplet.js点击波特效插件的可用配置参数如下：

{
  className:                '',
  color:                    'rgba(0, 0, 0, .1)',
  opacity:                  null,
  spreadingDuration:        '.4s',
  spreadingDelay:           '0s',
  spreadingTimingFunction:  'linear',
  clearingDuration:         '1s',
  clearingDelay:            '0s',
  clearingTimingFunction:   'ease-in-out',
}

ripplet.js点击波特效插件的github地址为：https://github.com/luncheon/ripplet.js