[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だけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ