Gaußscher Weichzeichner onHover Mit jQuery

Question

Ich frage mich, ob es eine Möglichkeit gibt, eine Gaußsche Unschärfe auf ein Div mit jQuery anzuwenden (oder CSS, das jQuery modifizieren kann). Ich habe in Unschärfe() geschaut, aber zumindest bei Safari scheint es nicht das zu sein, wonach ich suche. Wenn möglich, möchte ich fadeIn auf den Effekt anwenden, so dass es allmählich verschwimmt.

Danke für jede Hilfe!

Answer 1

Beachten Sie, dass Blur ist, wenn ein DOM-Element, wie Textfelder (Eingänge usw.) den Fokus verliert, und sollte nicht mit der Art der Unschärfe gemischt werden, über die Sie sprechen (Gaussian/Bewegungsunschärfe).

Es gibt keine gute Cross-Browser-Lösung für dieses Problem. Sie können jedoch Bilder mit einer API wie der von Ben vorgeschlagenen verwischen. Oder durch using this one.

Vielleicht, wenn Sie eine Möglichkeit finden, Ihre div-Inhalte auf einen HTML5-Canvas zu zeichnen, können Sie den Blur-Filter dann mit Pixastic anwenden?

Answer 2

Es wurde hier nicht erwähnt, dass wir einen realistischen Unschärfe-Effekt excellent für Text mit CSS3 text-shadow erstellen können. Und, (ja, natürlich!) Können wir feste Hintergründe und Ränder mit box-shadow verwischen (Schatten und mehrere Schatten sind erlaubt, weißt du).

So hoffe ich, in den meisten Fällen können Sie eine realistische Unschärfe-Effekt erzielen kombiniert:

1) Verwacklungsunschärfe Leinwand mit

2) Text Blurtext-shadow

3) fester Hintergrund und Ränder verwischen mitbox-shadow

4) habe ich noch etwas vergessen ....

---

PS: Ich glaube, es ist nicht möglich, eine magische Klasse zu schreiben, die jede html verwischt.

Die Einschränkungen, die nicht zu überwinden: die Grenze des Bildes verschwimmen, verwischen eingebettete Medien

Answer 3

überprüfen Sie die blur.js für jQuery-Plugin aus: http://blurjs.com, verwendet es meinen Stack-Blur-Algorithmus, den ich glaube, zur Zeit ist die schnellste JavaScript-basierte Weise Canvas-Elemente verschwimmen: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Answer 4

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'); 

Inhalt blur.svg

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

Mehr: http://demosthenes.info/blog/534/Crossbrowser-Image-Blur