マテリアルデザイン対応！タッチ、クリックでエフェクト。RippleEffectJSを公開しました！
2016.02.01
この記事は最終更新日から1年以上が経過しています。
なんだか、お久しぶりで記事を書く様な。。
ちょいとしたJSライブラリを作って見ましたので、ご報告をさせていただきます＞＜
これは何？
Material design対応。クリックまたはタッチで、リップルエフェクトを表示する、JavaScriptライブラリです。
簡単で好きな様に作成する事ができます。
バーン！
RippleEffectJS
– MaterialDesign – RippleEffect JavaScript Library
github
とりあえず、デモページみてもらえれば分かるかと思います！！！
デモページ
デモページでは、設定を好きな様に変更可能です！
インストール
インストールは、デモページや、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作成の方に移ろうかと思います ＞＜
