このサイトは、只今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

「二段階認証?」という方も 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

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

CATEGORY LIST

LATEST NEWS

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

Python

2019.07.18

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

JavaScript

2019.07.07

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

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

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

JavaScript

2019.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US