How On Earth was the following achieved?

suarve · 11 Nov 2006 at 23:43

Hi,

How was this done? The box at the top is yellow when the page loads and gradually fades to a different color after a few seconds. So sleek, wanna do this on my webby

Any ideas people, i assume it CS related...dunno

ta

MTA99 · 11 Nov 2006 at 23:51

If you read the source its done with JavaScript

Beansprout · 11 Nov 2006 at 23:56

That's one of the standard Wordpress effects (Wordpress is the blog system he's using), done by Javascript

Edit: And the Javascript is here :cool:

joeyjojo · 11 Nov 2006 at 23:56

Yep, it's been given <div class="fade note" id="about-fade-note">, but the fade is using one of the many javascript scripts in the head section.

suarve · 11 Nov 2006 at 23:57

Yer just noticed it. For anyone who is interested everything to get it going looks like its located here. Cheers for fast replies.

suarve · 11 Nov 2006 at 23:59

Beansprout said:
That's one of the standard Wordpress effects (Wordpress is the blog system he's using), done by Javascript

I have used wordpress quite a lot and scowered the web for a plugins. I ain't ever seen that effect before

Am i missing something that's included in wordpress by default?

Beansprout · 12 Nov 2006 at 00:01

suarve said:
I have used wordpress quite a lot and scowered the web for a plugins. I ain't ever seen that effect before Am i missing something that's included in wordpress by default?

It's in the admin panel - when you do stuff to a post, edit something, delete something, etc....the background of the status message fades

Never looked at the code the admin panel uses but I guess it's probably the same, it seems like a really nifty script

suarve · 12 Nov 2006 at 00:09

Must say, after looking around sites such as csszen and oswd, these sleek and clean sites, that use muted colors (like in the fader thing) are really beginning to grow on me.

Al Vallario · 12 Nov 2006 at 01:29

Beansprout said:
That's one of the standard Wordpress effects (Wordpress is the blog system he's using), done by Javascript

The concept is actually known rather abstractly as "The Yellow Fade Technique" and was coined as a usability aid by 37Signals for their Basecamp web application back in 2004. The code has probably matured since then, but credit where credit is due...

"Web Interface Design Tip: The Yellow Fade Technique" – Matthew Linderman, 19th February 2004

*av

Beansprout · 12 Nov 2006 at 01:42

Al Vallario said:
The concept is actually known rather abstractly as "The Yellow Fade Technique" and was coined as a usability aid by 37Signals for their Basecamp web application back in 2004. The code has probably matured since then, but credit where credit is due...

"Web Interface Design Tip: The Yellow Fade Technique" – Matthew Linderman, 19th February 2004

*av

Ooh cool, thanks

robmiller · 12 Nov 2006 at 01:55

I remember hating this when 37Signals first used it, for some crazy reason--I love it now. Strange how you change