Sfoca l'immagine gradualmente usando jQuery

Question

Ho un'immagine e voglio impostarne una sfocatura iniziale. In seguito ad un'azione da parte dell'utente, voglio che l'immagine riduca la sua sfocatura di una certa quantità. Esiste un plugin jQuery che ti permetta di gestire il raggio di sfocatura o qualcosa del genere?

Mi sono imbattuto in un'API jQuery qui http://www.pixastic.com/lib/docs/actions/blur/ Ma non penso che sia in grado di modificare la sfocatura dell'immagine gradualmente.

Hai bisogno di aiuto, Per favore Suggerisci che cosa dovrei fare? C'è qualcos'altro che posso usare? Grazie in anticipo.

Answer 1

Qualsiasi javascript sarà solo lato client - l'immagine sarà disponibile per essere visualizzata chiaramente se l'utente disabilita javascript o nel punto in cui l'immagine è stata caricata e il javascript non è stato eseguito.

Se è imperativo che l'immagine diventi più chiara quando l'utente seleziona la risposta corretta, suggerirei di avere immagini di "sfocatura" diversa sul server utilizzate per sostituire l'immagine precedente.

Answer 2

Date un'occhiata a questo tutorial: http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Esso utilizza StackBlur per sfocare poco a poco l'immagine.

Answer 3

Può. Ogni volta che viene chiamato Pixastic.process(img, "blur");, l'immagine è sfocata un po 'di più, quindi è solo questione di attivare quel metodo più volte.

Ora in diminuzione la sfocatura sarà un po 'più complicata, dal momento che (suppongo) che coinvolgerà il ripristino di una copia cache meno "sfocata" dell'immagine. Buona fortuna con questo!