CODEWITHSUNDEEP
javascriptjqueryfadeblur
Heath Waller
Heath Waller

Reputation: 31

Seeking a simultaneous fade and blur effect using JQuery or Javascript

Can anyone think of a way to simulate the fade/blur flash effect used in the following website:

http://www.frenchlaundry.com/ (image fades and blurs on hover, while text fades in simultaneously)

using JQuery? I am looking to have this whole chain of effects happen on load or when the DOM is ready (instead of on hover). And by blur, I mean a gaussian-type of blur - possibly using Pixastic (?)

I am really new at this, so please be gentle :)

Thank you.

Upvotes: 3

Views: 7458

Answers (3)

ivanreese
ivanreese

Reputation: 2758

This library includes the ability to blur images: http://www.pixastic.com/

As for animating the blur effect, as Raja said you can look at the animate() method of Jquery, or simply use the setTimeout function.

Upvotes: 2

Ben
Ben

Reputation: 16543

Since Jquery effects are just implementations of the animate() method, which uses CSS properties and then makes a smooth transition between them, there's no easy way to implement a Gaussian blur.

You could use Pixastic and then fade in some hidden text over the blurred image, why not.

Upvotes: 2

Raja
Raja

Reputation: 3618

You should use animate() method of Jquery to achieve what you want.

Check out the link below...It has numerous examples:

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

HTH

Upvotes: 3

Related Questions