JungleDragon Karma Control Video »
FERDY CHRISTANT - NOV 24, 2009 (08:28:13 PM)
A few days ago I showed you how I applied qTip, a jQuery Tooltip plugin, to JungleDragon's karma control:
The karma control is permanently visible for every logged in user at JungleDragon and basically shows their reputation:
- Karma is at the base, they are the credits you earn for positive actions. It is visualized as a progress bar.
- The progress bar shows how far the user has progressed in their level. At 100% they are promoted to the next level.
- Every few levels, you get upgraded to a new class. The class is the animal in the food chain that your reputation is associated with.
None of this is new to people who follow this blog. However, what is new is that I have now implemented some cool jQuery animations that run at certain events, such as earning new karma, promoting to a new level or promoting to a new class. Check out the video below for the effects:
Apologies for the poor video quality, trust me, it looks much better in real life. Since there is no audio, here's a short transcript of what happens:
Scene 1: Karma control placement and tooltips
This scene shows where the control is positioned on a JungleDragon page. Next, it shows the tooltips in action.
Scene 2: Karma upgrade
This scene focuses on the control to see the full effect of what happens when the user has earned new karma, for example right after uploading a new image. It displays and blinks the newly earned karma. Next, it redraws the progress bar in a cool animation to reflect your new reputation. Finally, the user's avatar blinks twice to indicate that the animation ended.
Scene 3: Level upgrade
This scene shows what happens when users are promoted to the next level. It shows and blinks the level upgrade message and then blinks the new level number a few times. Notice how the progress bar is now at the beginning of the new level, encouraging the user to grow into this new level.
Your level is displayed everywhere you are mentioned: when you upload an image, post a comment, make a vote, etc. It is therefore a highly visible and competitive reputation indicator.
Scene 4: Class upgrade
This scene show what happens when users are promoted to the next class. It shows and blinks the class upgrade message and then blinks the new class image a few times. It can take several levels to promote to a new class. Like the level indicator, the class image and name are displayed throughout JungleDragon. It is a highly visual and visible reputation indicator, designed to enourage activity and competition.
Well, that's it. I fully realize one should be careful in using animations on the web, but I found this area to be worth innovating in. The reputation system of JungleDragon is unique, and I consider it to be an essential component to engage the community that I intend to grow.
I'm highly curious of what you think?