Seeking a simultaneous fade and blur effect using JQuery or Javascript

Posted by Heath Waller on Stack Overflow See other posts from Stack Overflow or by Heath Waller
Published on 2010-04-11T23:33:21Z Indexed on 2010/04/11 23:43 UTC
Read the original article Hit count: 808

Filed under:

jQuery

|

blur

|

fade

|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Microsoft and jQuery

as seen on West-Wind - Search for 'West-Wind'
The jQuery JavaScript library has been steadily getting more popular and with recent developments from Microsoft, jQuery is also getting ever more exposure on the ASP.NET platform including now directly from Microsoft. jQuery is a light weight, open source DOM manipulation library for JavaScript that… >>> More
An Introduction to jQuery Templates

as seen on Stephen Walter - Search for 'Stephen Walter'
The goal of this blog entry is to provide you with enough information to start working with jQuery Templates. jQuery Templates enable you to display and manipulate data in the browser. For example, you can use jQuery Templates to format and display a set of database records that you have retrieved… >>> More
Ajax Control Toolkit December 2013 Release

as seen on Stephen Walter - Search for 'Stephen Walter'
Today, we released a new version of the Ajax Control Toolkit that contains several important bug fixes and new features. The new release contains a new Tabs control that has been entirely rewritten in jQuery. You can download the December 2013 release of the Ajax Control Toolkit at http://Ajax.CodePlex… >>> More
jQuery show "loading" during slow operation

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to show a small loading image during a slow operation with jQuery and can't get it right. It's a BIG table with thousands of rows. When I check the "mostrarArticulosDeReferencia" checkbox it removes the "hidden" class from these rows. This operation takes a couple of seconds and I want… >>> More
Tracking download of non-html (like pdf) downloads with jQuery and Google Analytics

as seen on Developer IT - Search for 'Developer IT'
Hi folks, it’s been quite calm at Developer IT’s this summer since we were all involved in other projects, but we are slowly comming back. In this post, we will present a simple way of tracking files download with Google Analytics with the help of jQuery. We work for a client that offers… >>> More

Related posts about blur

What is the most efficient way to blur in a shader?

as seen on Game Development - Search for 'Game Development'
I'm currently working on screen space reflections. I have perfectly reflective mirror-like surfaces working, and I now need to use a blur to make the reflection on surfaces with a low specular gloss value look more diffuse. I'm having difficulty deciding how to apply the blur, though. My first idea… >>> More
Keep focus on blur event

as seen on Stack Overflow - Search for 'Stack Overflow'
I am using jquery to keep the focus on a text box when you click on a specific div. It works well in Internet Explorer but not in Firefox. Any suggestions? var clickedDiv = false; $('input').blur(function() { if (clickedDiv) { $('input').focus(); } }); $('div').mousedown(function() { clickedDiv… >>> More
Why does filter: blur(0) still cause text to blur under Webkit?

as seen on Stack Overflow - Search for 'Stack Overflow'
I've come across a bug today that's taken far longer than I would like to admit to identify. Essentially: setting a filter: blur(0) (or the vendor-specific -webkit-filter) on an element should - I believe - mean that no form of blur is applied. However, having tested this today, it would appear… >>> More
GLSL - one-pass gaussian blur

as seen on Game Development - Search for 'Game Development'
It is possible to implement fragment shader to do one-pass gaussian blur? I have found lot of implementation of two-pass blur (gaussian and box blur): http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html http://www.gamerendering.com/2008/10/11/gaussian-blur-filter-shader/ http://www… >>> More
Two pass blur shader using libgdx tile map renderer

as seen on Game Development - Search for 'Game Development'
I am trying to apply the following technique: blur effect using two pass shader to my libgdx game using the OrthogonalTiledMapRenderer. The idea is to blur the background wich is also a tilemap but rendered with another camera with a different zoom applied. Here is a screen capture without effect: Using… >>> More