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".
Archived Comments
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.
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.
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.
For a good example, see this:
https://developer.mozilla.o...
I'm still a bit confused - but I feel closer to groking it now.
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.
What browser was it?
Wouldn't you need something that works in all browsers as well as Mozilla?
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.
@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.
I agree.
Wasn't trying to be snarky.
You guys are the best.
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; }
Blackjk:
It was confusing to me. I didn't say it was confusing to all. ;)
I'm writing my blog post right now actually.
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.
@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.