javascript - jQueryを使用したガウスぼかしonHover

Question

jQuery（またはjQueryが変更できるCSS）を使用してガウスぼかしをdivに適用する方法があるかどうか疑問に思っています。私はblur（）を調べましたが、少なくともSafariでは、私が探しているものを達成しているようには見えません。可能であれば、エフェクトにフェードインを使用したいので、徐々にぼやけます。

助けてくれてありがとう！

Answer 1

これBlurは、テキストボックス（入力など）などのDOM要素がフォーカスを失う場合であり、話している種類のブラー（ガウス/モーションブラー）と混合しないでください。

この問題に対する適切なクロスブラウザソリューションはありません。ただし、Benが提案するようなAPIを使用して、画像をぼかすことができます。またはこれを使用して。

divのコンテンツをHTML5キャンバスに描画する方法を見つけた場合は、Pixasticを使用してBlur-filterを適用できますか？

Answer 2

jQuery用のblur.jsプラグインをチェックしてください：http：//blurjs.com 、これは私のStack Blurアルゴリズムを使用しています。これは、現在、JavaScriptベースの最速の方法でキャンバス要素をぼかします：http ：//www.quasimondo.com/StackBlurForCanvas /StackBlurDemo.html

Answer 3

filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

Blur.svgのコンテンツ

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

詳細：http ：//demosthenes.info/blog/534/Crossbrowser-Image-Blur

Answer 4

ここでは、 CSS3を使用してテキストに優れたリアルなぼかし効果を作成できることについては触れていませんtext-shadow。そして、（もちろんです！）box-shadow （はめ込み影と複数の影が許可されています）を使用して、無地の背景と境界線をぼかすことができます。

したがって、ほとんどの場合、以下を組み合わせてリアルなぼかし効果を実現できることを願っています。

1）キャンバスを使用した画像のぼかし

2）を使用してテキストをぼかす text-shadow

3）無地の背景と境界線を使用してぼかす box-shadow

4）他に何か忘れましたか？....

---

PS：HTMLをぼかす魔法のクラスを書くことは不可能だと思います。

克服できない制限：画像の境界線をぼかす、埋め込まれたメディアをぼかす