RippleEffectJS - MaterialDesign - RippleEffect JavaScript Library

Setting

Click

color

width

height

time

isCircle

(BackgroundImage Only)

RippleEffect.js

Material design - RippleEffect JavaScript Library

bower install ripple_effect.js

<script src="ripple_effect.js"></script>

<script src="ripple_effect.js"></script>

var rippleEffect = new RippleEffect();

Singleton Object

new RippleEffect(Options);

OptionName	DefaultValue	SetValue	OptionDetail
color	'#64c7eb'	string	RippleEffectの色を指定
width	'50px'	string	RippleEffectの幅を指定。isCircle trueの場合は、width,heightいずれかの最大値と同等となる。
height	null	string	RippleEffectの高さを指定。isCircle trueの場合は、width,heightいずれかの最大値と同等となる。
time	500	number (ms)	RippleEffectのアニメーションの速さを指定。
image	null	string	背景画像パスを指定。BackGroundImageSizeは、isCircle trueの場合は、width値と同等となる。
isCircle	true	boolean	円形判定。背景画像指定の際は、false指定。
rippleClass	'rf-ripple'	string (className)	RippleEffectの大枠のcssクラス名
ripplePictureClass	'rf-ripple-picture'	string (className)	RippleEffectの中身のcssクラス名

Daisuke Takayama

Released under the MIT license