Recherche d'un effet de fondu et de flou simultané à l'aide de JQuery ou Javascript

Question

Quelqu'un peut-il penser à une manière de simuler l'effet de flash fade/blur utilisé sur le site suivant :

http://www.frenchlaundry.com/ (l'image s'estompe et se brouille au survol, pendant que le texte s'estompe simultanément)

en utilisant JQuery ? Je cherche à avoir toute cette chaîne d'effets se produire au chargement ou lorsque le DOM est prêt (au lieu du survol). Et par flou, je veux dire un flou de type gaussien - peut-être en utilisant Pixastic (?)

Je suis vraiment nouveau dans tout ça, alors soyez indulgent :)

Merci.

Answer 1

Vous devez utiliser la méthode animate() de Jquery pour obtenir ce que vous voulez.

Consultez le lien ci-dessous... Il contient de nombreux exemples:

http://api.jquery.com/animate/

Avec plaisir

Answer 2

Puisque les effets Jquery ne sont que des implémentations de la méthode animate(), qui utilise les propriétés CSS puis effectue une transition en douceur entre elles, il n'y a pas de moyen facile d'implémenter un flou gaussien.

Vous pourriez utiliser Pixastic puis faire apparaître un texte caché sur l'image floue, pourquoi pas.

Answer 3

Cette bibliothèque inclut la capacité de flouter les images : http://www.pixastic.com/

Quant à l'animation de l'effet de flou, comme l'a dit Raja, vous pouvez regarder la méthode animate() de Jquery, ou simplement utiliser la fonction setTimeout.