AMG Solution

jQueryライブラリを使用して、クリックエフェクトの簡単実装

こんにちは、樋口です。
 
今回は、要素クリック時に波紋のエフェクトをつけることができるライブラリ、jQuery Rippleriaについてご紹介します。
 
今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
jquery.rippleria.js
1.3.1
BootStrap
3.2.0

ライブラリの入手

jQuery Rippleriaは下記サイトよりダウンロードできます。
jquery.rippleria.jsダウンロード
 
ファイルダウンロード後、ZIPファイルの中身の下記ファイルを任意の場所へ解凍します。

  • jquery.rippleria.min.js
  • jquery.rippleria.css

これで準備は完了です。

HTMLファイル

初めに、HTMLファイルを作成します。
 
– index.html

 
10行目:
jquery.rippleriaで使用するCSSを読み込みます。
 
42~43行目:
初期表示時に表示される画像と、画像に関連するaタグを指定しています。
42行目の「id=”rippleria”」が次項で説明する、javaScriptで必要な指定となっています。
 
52行目:
ボタン要素を記述しています。
42行目と同様に「id=”rippleria”」を指定して、次項のjavaScriptでエフェクトの指定を行います。
 
55~60行目:
42行目、52行目とは異なり、直接ボタンクリック時のエフェクトの指定を行っています。
下記に、指定するパラメータについて記載します。

パラメータ 内容
data-rippleria-color エフェクト背景色を指定
data-rippleria-duration エフェクト実行時間
data-rippleria-easing ease-in(ゆっくり始まる)、ease-out(ゆっくり終わる)、ease-in-out(ゆっくり始まってゆっくり終わる)など指定可能

74行目:
jquery.rippleriaで使用するjavaScriptを読み込みます。
 
以上で、HTMLは完成です。
次に、エフェクトをONにするための、javaScriptについて説明します。

javaScriptファイル

次に、ライブラリ実行用のjavaScriptファイルを作成します。
 
– test.js

 
2~5行目:
対象要素の、エフェクトの設定を記載しています。
※ 設定内容は、前項「55~60行目」と同等
 
7~14行目:
対象要素クリック時の、動作を記載しています。
※ 今回は、公式ページのサンプルを元に実装を行っております。
 
16~18行目:
対象要素の色変更時の、動作を記載しています。
※ 今回は、公式ページのサンプルを元に実装を行っております。

実行結果

最後に、実行イメージを下記に載せます。
 
– 画像クリック
エフェクト4
 
 
– ボタンクリック
エフェクト5
 
 
– ボタン(カスタム設定)クリック
エフェクト6

最後に

今回紹介したライブラリを使用すれば、クリックイベントでのエフェクトが簡単に設定できます。使用手順も簡単なため、ぜひ試してみてください。今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING