[jQuery]背景画像にぼかしを入れるプラグイン

公開日: : jQuery, Web制作 ,

Blurrプラグインの紹介

BlurrはシンプルなjQueryのプラグインです。
そして、背景画像にとてもすてきなぼかしを入れてくます。

20140823_img01

導入方法

まずは、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] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

[jQuery] クリック時に波紋のような効果をつける

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple

記事を読む

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[CSS] 複数のbackground-imageの設定方法

マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像

記事を読む

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

[Dreamweaver] コーディングを早くする5つの方法

コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑