views:

37

answers:

0

This might be a shot in the dark, but what the heck. It would make for an astounding effect in my website for a welcome message to new users.

In Hollywood, some movies present text with a wavy blur-to-focus and simultaneous fade-in effect on text (and the entire book, actually), such as perhaps in a Harry Potter movie. I can't pin it down exactly where I have seen this.

But anyway, now that CSS3 is here and can be made to deprecate in other non-CSS3 browsers, as well as the magic of jQuery, I was wondering if there is a way to repeat this effect in a web page?

Imagine a faded in DIV that has a border around it, flat on a page (not raised with a blurry box shadow), with no text. Then, within a second, the DIV adds a blurry box shadow, moves left and right gently, the solid border of the DIV goes blurry, and blurry text appears. Then, as the DIV slows down its left and right motion, everything comes into focus. You are left with what looks like a raised DIV from the page (thanks to box shadow blur behind it), a focused thin border (not too bright) around the DIV, and focused text.