Material design风格点击波特效js插件

当前位置:主页 > jQuery库 > 按钮和图标 > Material design风格点击波特效js插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
Material design风格点击波特效js插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-11-21
    阅读:
简要教程

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

下一篇:没有了

网友评论