[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
関連記事
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ