Creating a highlight/fadeout text effect on a tag cloud

This post is more than 2 years old.

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".

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by JP posted on 2/3/2012 at 3:48 AM

The opacity animation is nice, but to complete the coolness factor of the cloud on:

http://www.amivitale.com/

You would also need to overlap the words, and justify them within a rectangle (span to left/right edges). I think the trick is to somehow randomly overlap the words with CSS.

Comment 2 by Kevin Hoyt posted on 2/3/2012 at 4:25 AM

I think it is an interesting choice to use jQuery for this. Seems like a great use-case for a :hover pseudo selector with a CSS animation hook in it. Then there's no need for JavaScript at all, and you get hardware acceleration where available.

Comment 3 by Raymond Camden posted on 2/3/2012 at 4:28 AM

Well, looks like I have something to try tomorrow morning then. :) Last time I looked an animation in CSS it confused the heck out of me - but this would be a good excuse to try to finally grok it.

Comment 4 by Raymond Camden posted on 2/3/2012 at 7:41 AM

For a good example, see this:

https://developer.mozilla.o...

I'm still a bit confused - but I feel closer to groking it now.

Comment 5 by Nathan D posted on 2/3/2012 at 10:24 AM

One of the examples on that CSS animations page made my browser crash. Pretty good reason to use jQuery for now, if you ask me.

Comment 6 by Raymond Camden posted on 2/3/2012 at 4:38 PM

What browser was it?

Comment 7 by Terry Sampson posted on 2/3/2012 at 5:28 PM

Wouldn't you need something that works in all browsers as well as Mozilla?

Comment 8 by Raymond Camden posted on 2/3/2012 at 7:37 PM

Why Terry? What you need to support depends on your audience. While it is clear that my code here probably works better than pure CSS animations, there's no reason not to try. As long as we only build for the lowest common denominator, we will never push the web forward.

Comment 9 by Kevin Hoyt posted on 2/3/2012 at 7:56 PM

@Nathan,

Not trying to sound snarky here, but I've been to lots of sites where poor JavaScript has locked a browser tab or crashed my browser altogether. CSS Animation declarations can be complicated to get to get right. I don't think it's fair to blame an overall technology based on a bad examples. That's how we got to "Flash is evil" in the past.

@Terry,

CSS Animations are supported in Firefox 7 - 10, Chrome 13 - 16, Safari 4 -5.1, iOS 3.2 - 5. On Android, CSS Animations have been partially supported (enough to cover this use-case) from 2.1 - 3 and is fully supported in 4. CSS Animations work fully in preview releases of IE 10.

Point being that there's really pretty solid coverage. You definitely have to gauge your users before dismissing features that move all of us forward.

Comment 10 by Terry Sampson posted on 2/3/2012 at 8:02 PM

I agree.

Wasn't trying to be snarky.

You guys are the best.

Comment 11 by blackjk posted on 2/3/2012 at 8:46 PM

I don't understand the confusion with CSS transitions here.

.tagcloudword {
opacity: 0.5;

/* Removed other prefixes for simplicity */
transition: all 0.3s ease-out;
}
.tagcloudword:hover { opacity: 1.0; }

Comment 12 by Raymond Camden posted on 2/3/2012 at 8:49 PM

Blackjk:

It was confusing to me. I didn't say it was confusing to all. ;)

I'm writing my blog post right now actually.

Comment 13 by Raymond Camden posted on 2/3/2012 at 8:51 PM

Posted an update here:

http://www.raymondcamden.co...

This is certainly not rocket science - but I'm glad I was finally pushed to look into it. Far simpler than I expected.

Comment 14 by Nathan D posted on 2/3/2012 at 10:38 PM

@Kevin - Flash IS evil ;)

Of course javascript CAN also kill a browser, but that's WAY less common a problem than Flash killing a browser. By a couple orders of magnitude in my experience. But, in this case the issue is that CSS animations are pretty cutting edge and have uneven support (even the solution in Ray's follow up post shows the complications of doing this TODAY for anything other than a very controlled audience). Great to play with on a blog, but worth noting for developers of things real humans use that it's not a no-brainer by any stretch.

@Ray it was Safari 5 that crashed on that site.