[jQuery] クリックしたところから波紋が広がるプラグイン!
公開日:
:
jQuery, Web制作 javascript, jQuery
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
Rippler
以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介します。
今回紹介する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] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を