[jQuery] クリックしたところから波紋が広がるプラグイン!

公開日: : jQuery, Web制作 ,

Rippler

スクリーンショット 2014-09-08 0.23.25

以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介します。

今回紹介するRipplerは、Bootstrapのボタンにも効果をつける事ができます。

早速導入方法からいってみましょう。

導入方法

まずは、jQueryやプラグインの関連ファイルの読み込みです。
Bootstrapが必要な方は、それも読み込みましょう。
今回は、Bootstrapも記述しておきます。

<!-- bootstarp上のボタンで使いたい場合は、bootstrapを読み込みます -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- ripplerのCSSファイル -->
<link rel="stylesheet" href="任意のファイルパス/rippler.min.css">
<!-- jQuery(Google上のものを読み込んでもいいし、ローカルに落として任意のファイルパスで読み込んでもいい) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- rippler js -->
<script src="任意のファイルパス/jquery.rippler.min.js"></script>

これで必要なファイルは読み込みました。

続いてHTMLのマークアップです。

<button class="btn btn-primary rippler rippler-default" href="#">bootstrap button</button>

このように、クラスをつけていきます。

最後に、実行文を追加します。

$(document).ready(function() {
  $(".rippler").rippler({
    effectClass      :  'rippler-effect'
    ,effectSize      :  16      // Default size (width & height)
    ,addElement      :  'div'   // e.g. 'svg'(feature)
    ,duration        :  400
  });
}); 

これで完成です。

サポートしているブラウザは、IE10〜、Chrome、Safari、Firefoxです。

まとめ

最近は、スマホ事情もあってか、クリッカブルなものにタッチしたと認識させるために波紋系のjsが増えてきています。
ユーザーのことを考えているのでとてもいいと思います。
逆に、こういうjsを追加する事によってサイトが重くなる事は避けたいですね。

 

ad

関連記事

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[Dreamweaver] サイトタイトルを入力する枠を広げる!

デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ

記事を読む

[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!

寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[Dreamweaver] テンプレートの入れ子

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

[javascript] Google Maps javascript API v3の使い方(基本編)

Google Maps javaScript API v3とは Google Maps API V

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑