「手前に小窓を出して後ろのコンテンツをぼかす」というサイトをどこかで見かけ、それをやってみたかったのでjQueryのプラグインを利用して試してみました。
Foggy.js
ぼかしてくれるjQueryのプラグインは調べたら何個かあったのですが、このFoggy.jsが一番良さそうだったのでこちらにしました。ちなみにwebkitのブラウザだと-webkit-filterでぼかしが出来ます。
Foggy.jsのページは以下から
サンプルページ
そして、Foggy.jsを使ったサンプルページはこちら
プラグインをただ導入した以外の点としては、
- .click()だと2回目からのクリックが効いてくれなかったので、$(document).on(‘click’, ‘#content .img’,function()~略 を使用
- 小窓の「閉じる」ボタン以外にも領域外をクリックしたときにも閉じたかったので、ポップアップの外側をクリックしたら閉じるためのjQuery Tips | milestonerを参考に設置
あとは、ぼかすコンテンツ部分の中身のmargin値によってぼける位置がものすごくズレました。なのでぼける位置がおかしい場合は、ぼかすコンテンツ部分の中身のmargin値などを調整すると治るかと思います。サンプルの場合はh1をmarginで隙間をあけると変になったのでpaddingにしました。
コメント