[jQuery]背景画像にぼかしを入れるプラグイン
公開日:
:
jQuery, Web制作 javascript, jQuery
Blurrプラグインの紹介
BlurrはシンプルなjQueryのプラグインです。
そして、背景画像にとてもすてきなぼかしを入れてくます。
導入方法
まずは、jQueryとBlurrのjsファイルを読み込みます。
<script src="jquery.min.js"></script> <script src="jquery.blurr.js"></script>
HTMLでは、divを用意します。
<div class="blur-this" data-href="example-image.jpg"><div>画像の上に表示したいテキスト</div></div>
注意:blur-thisの中に必ずdivが必要です。
$(document).ready(function() { $('.blur-this').blurr({ height: 300, // ぼかしをかけたいdivの高さ sharpness: 40, // 0〜100までの間で数字が大きいほどぼける }); });
最後に実行して終わりです。パラメータは設定しなくても問題ありませんので、その場合、下記の実行文のみで大丈夫です。
$(document).ready(function() { $('#blur').blurr(); });
シンプルにこれだけです。
まとめ
数を置くと動作がちょっと重いのが難点ですが、ぼかしをかけたい時にはシンプルなのでちょうどいいかもしれません。
ad
関連記事
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを