このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

なんだか、お久しぶりで記事を書く様な。。

ちょいとしたJSライブラリを作って見ましたので、ご報告をさせていただきます＞＜

これは何？

Material design対応。クリックまたはタッチで、リップルエフェクトを表示する、JavaScriptライブラリです。

簡単で好きな様に作成する事ができます。

バーン！

RippleEffectJS
– MaterialDesign – RippleEffect JavaScript Library

github

RippleEffectJS

とりあえず、デモページみてもらえれば分かるかと思います！！！

デモページ

デモページ

デモページでは、設定を好きな様に変更可能です！

インストール

インストールは、デモページや、Bowerやgithubから宜しくお願いします。

Bower

bower install ripple_effect.js

使い方

使い方は至って簡単です！！

読み込むだけです！！

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

その他の使い方として、

JavaScriptファイルを読み込んで、

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

var rippleEffect = new RippleEffect();

newして、インスタンス生成して使う事も可能です。

シングルトンオブジェクトなので、何度newされても同等のオブジェクトとなります。

オプション

newする際に、オプション指定する事ができます。

new RippleEffect(Options);

例としてこの様な感じです。

new RippleEffect({
    "color": "#ffffff"
});

オプション

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クラス名

と、言った感じで、タッチ、クリックした際のエフェクトを簡単で好きな様に作成する事ができるJavaScriptライブラリでした。

よろしければ使っていただければと！！！

これを機にそろそろ、JavaScriptはちょっとおやすみして、

いい加減長い間放置してしまった、App作成の方に移ろうかと思います ＞＜