用css3模拟谷歌MaterialDesign Ripple水波纹触摸动画插件
用css3模拟谷歌MaterialDesign Ripple水波纹触摸动画插件
JavaScript CSS相关
访问GitHub主页
共2Star
详细介绍
rippleButton.js
模拟谷歌水波纹按钮效果插件 提供两个版本:
- 原生js版 不依赖任何库
- JQuery版 使用更轻巧
Demo
for- Native JS
Installation
<script src="js/rippleButton.js" type="text/javascript"></script>
Usage
<div class="btn">Button</div>
<script type="text/javascript">
var ripple = new RippleButton('.btn',{
alpha: '0.5',
speed: '1.1s',
transitionEnd:function(){ //transition End
console.log('finished');
}
});
</script>
for- JQuery
Installation
<script src="js/jquery.rippleButton.js" type="text/javascript"></script>
Usage
<div class="btn">Button</div>
<script type="text/javascript">
$('.btn').rippleButton();
// or
$('.btn').rippleButton({
alpha: '0.5',
speed: '1.1s',
transitionEnd:function(){
console.log('finished');
}
});
</script>
Options
Option | Default | type | Description |
---|---|---|---|
alpha | 0.5s | string | The transparency alpha of the ripple. |
speed | 1.1s | string | The duration which are given in milliseconds of effect. |
transitionEnd | function(){} | function | Callback after transition end. |
推荐源码
-
32 Star
-
17 Star
-
69 Star
-
62 Star
-
15 Star
-
22 Star
-
8 Star
-
7 Star
-
0 Star