[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
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
関連記事
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像