SSWI — When in doubt, buff it out.

So Sillyness newcomer Mark emailed me asking how to achieve the fading effect you see on the site. I thought that it was a good candidate for a tutorial, and even better, a great candidate for my new feature the Tuesday Howto.

So lets get this party started.

First, the idea

So when I was designing this version of Sillyness, I wanted to highlight the newest post in a way that was a bit subtler than some of my past attempts. Gone were borders and background colors; Right out were ginormous text treatments and flashing lights.

No, this time I wanted to err on the side of understatement and refinement. I started thinking about how spatially we distinguish nearer objects from farther ones. Obviously perspective is the main way in which we distinguish them, but another, very useful way is clarity.

Objects that are closer to you seem sharper, clearer and more in focus. As objects move away from you they lose definition and clarity, them dim if you will. This thought process brought me to a solution that I thought met all my requirements, and seemed like a fun challenge to boot.

So having decided on the effect I wanted, I need to figure out how to make it happen. Enter our friend jQuery.

jQuery, how do I love thee?

I really can’t say enough good things about jQuery. It gets out of your way and makes complex things simple, and understandable. If you don’t use it, do your self a favor and go read the documentation. You will love Javascript when you are done, I guarantee it.

So in a nutshell, this is what the code I wrote does:

1. When the page loads, jQuery loops through the source and finds all the divs that have a class of aged and shoves it into an array.
2. Once it has that array constructed it loops through and fades them to a lower opacity based on the age of the entry.
3. The fade number starts at 0.8 (1.0 being no fade) on the first older post and as we move backwards in time the fade number is reduced by 0.1. So this means that the first older post is 0.7 and the last older post is 0.4.
4. To achieve the mouseover fade in, we simply tell jQuery to fade anything that is moused over inside the old div to 1.0 and then fade it to 0.5 on mouseout.

And just like that we are done

And that is all there is to it really. Here is the code that is running here on Sillyness:

$(document).ready(function() { var num= 0.8; var incr= 1; var val= ''; $('.aged').each(function() { $(this).fadeTo('fast', num - val); val= '0.' + incr; incr++; }); $('.old').hover( function() {$(this).children().fadeTo('fast', 1.0);}, function() {$(this).children().fadeTo('fast', 0.5);} ); });

Hope you enjoy it, and please leave any questions/comments/improvements in the comments.

If you post about this on Twitter, please use the hashtag #silly867.