Creating a highlight/fadeout text effect on a tag cloud

Yesterday I blogged a simple example of how to turn an RSS feed into a tag cloud. Today reader JP commented that it would be cool if I could mimic an effect he saw in a Flash based tag cloud. Basically, as you mouse over each word, they light up. Here's what I came up with.

First off - I tweaked my data a bit. Instead of working with an RSS feed, I decided to hit my copy of CFBloggers and scan all the category data. My local database is a good 6 months old, but still has 48 thousand entries. This gave me a nice set of data. If you remember, Pete's tag cloud code already wraps every word with a span. The class on the span is based on the word's relative "score" compared to other words. I decided then to simply append to that:

<cfoutput><span class="tagcloudword #class#">#w#</span></cfoutput>

I then added a CSS style for tagcloudword to make it a bit light by default:

.tagcloudword { opacity: 0.5; }

And then it was time for the jQuery. Turned out - it was pretty damn trivial:

$(function() { $(".tagcloudword").mouseover(function(e) { $(this).animate({opacity:1.0},400); }); $(".tagcloudword").mouseout(function(e) { $(this).animate({opacity:0.5},400); }); });

As you can see, I'm simply using the animate API to change opacity when you mouse over and out of the word. And that's it. You can even make it simpler with the hover event:

$(".tagcloudword").hover(function(e) { $(this).animate({opacity:1.0},400); },function(e) { $(this).animate({opacity:0.5},400); });

You can see a demo of this yourself by clicking the big demo button below. Note that I saved out the result as an HTML, so it's not "live".

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.