[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
関連記事
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)
まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll