Skip to content

用css3模拟谷歌MaterialDesign Ripple水波纹触摸动画插件

Notifications You must be signed in to change notification settings

onlyhom/ripple-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

rippleButton.js

模拟谷歌水波纹按钮效果插件 提供两个版本:

  • 原生js版 不依赖任何库
  • JQuery版 使用更轻巧  

Demo

Image text


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.

About

用css3模拟谷歌MaterialDesign Ripple水波纹触摸动画插件

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published