ripplet.js是一款Material design风格点击波特效js插件。通过ripplet.js插件，你可以制作并控制点击波效果，生成自己风格的点击波特效。
安装
可以通过nmp来安装ripplet.js插件。
$ npm install ripplet
|
使用方法
在页面中引入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',
}
|