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

Archives Details

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

JavaScript

2016.02.01

この記事は最終更新日から1年以上が経過しています。

687474703a2f2f77656263796f752e636f6d2f726970706c655f6566666563745f6a732f64656d6f2f696d672f73637265656e5f73686f742e706e67

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

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

これは何?

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

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

バーン!

RippleEffectJS
– MaterialDesign – RippleEffect JavaScript Library

github

RippleEffectJS

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

デモページ

デモページ

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

687474703a2f2f77656263796f752e636f6d2f726970706c655f6566666563745f6a732f64656d6f2f696d672f73637265656e5f73686f745f64656d6f5f706167652e706e67

インストール

インストールは、デモページや、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作成の方に移ろうかと思います ><

Comment

Related Article

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

CATEGORY LIST

LATEST NEWS

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

mac

2019.12.08

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US