要素にぼかす効果を付けられるFoggy.jsを試してみた

Javascript

「手前に小窓を出して後ろのコンテンツをぼかす」というサイトをどこかで見かけ、それをやってみたかったのでjQueryのプラグインを利用して試してみました。

Foggy.js

ぼかしてくれるjQueryのプラグインは調べたら何個かあったのですが、このFoggy.jsが一番良さそうだったのでこちらにしました。ちなみにwebkitのブラウザだと-webkit-filterでぼかしが出来ます。

Foggy.jsのページは以下から

サンプルページ

そして、Foggy.jsを使ったサンプルページはこちら

プラグインをただ導入した以外の点としては、

あとは、ぼかすコンテンツ部分の中身のmargin値によってぼける位置がものすごくズレました。なのでぼける位置がおかしい場合は、ぼかすコンテンツ部分の中身のmargin値などを調整すると治るかと思います。サンプルの場合はh1をmarginで隙間をあけると変になったのでpaddingにしました。