Create Spinning, Fading Icons with CSS3 and jQuery

By  on  

Last week I debuted a popular blog post titled Create Spinning, Fading Icons with CSS3 and MooTools. The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons.  Due to popular request, I've duplicated the effect with another popular JavaScript toolkit:  jQuery.


<div id="followIcons">
	<a href="" id="iconRSS">RSS Feed</a>
	<a href="" id="iconTwitter">@davidwalshblog Twitter</a>
	<a href="" id="iconGitHub">@davidwalshblog Twitter</a>
	<a href="" id="iconDelicious">dwizzlestar</a>
	<a href="" id="iconFacebook">David Walsh Facebook</a>
	<a href="" id="iconLinkedIn">David Walsh LinkedIn</a>
	<a href="skype:davidwalsh83?chat" id="iconSkype">David Walsh Skype</a>
	<a href="" id="iconMail">David Walsh Email</a>
	<a href="" id="iconForge">David Walsh MooTools Forge</a>

The links are as standard as they come.  These will be turned into dynamic icons.


The first part of the process is using standard CSS to move the text off screen and instead use the icons as background images for the link:

#followIcons a	{
background-position:0 0;

Once we've done that time-tested practice, it's time to put a few initial CSS3 settings into place. As you probably know, at this point all CSS transform properties are browser-specific, so our CSS will get a bit lengthy:

#followIcons a	{
transition-duration: 0.8s;
transition-property: transform;

The transition duration will be 0.8 seconds and transition property will be a basic transform. You can change the transform duration to any duration you'd like. Too fast or too slow will ruin the effect (that's what she said).

The jQuery JavaScript

The first part is randomly positioning each node/icon within the container. It's important to know the container's width and height, then subtract the icon width and height from that to know the true area you can fit the icon into. Nothing would be more lame than a piece of the icon hidden. The next step of the process is adding mouseenter and mouseleave events to make the images rotate and fade in during each respective event.

jQuery(document).ready(function() {

	// "Globals" - Will make things compress mo-betta
	var $random = function(x) { return Math.random() * x; };
	var availableWidth = 400, availableHeight = 40;
	// Get the proper CSS prefix
	if(jQuery.browser.webkit) {
		cssPrefix = "webkit";
	else if(jQuery.browser.mozilla) {
		cssPrefix = "moz";
	else if(jQuery.browser.opera) {
		cssPrefix = "o";

	// Apply opacity
	var zIndex = 1000;
	// Randomize each link
	jQuery.each(jQuery("#followIcons a"),function(index) {
		var startDeg = $random(360);
		var element = jQuery(this);
		var resetPlace = function() {
			element.fadeTo(250,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
		element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {
			element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");

When the mouseenter event occurs, the rotation is animated to 0, no rotation. When the mouse leaves the element, the element animates to its initial random rotation. You'll also note that I've used opacity to add to the subtle effect.

There you have it!

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    Xbox Live Gamer API

    My sharpshooter status aside, I've always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I'd like to publicly shame every n00b I've baptized with my...

  • By
    Dijit&#8217;s TabContainer Layout:  Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...


  1. JGarrido

    I must be seriously missing something, because nothing happens on hover in either Chrome nor Firefox on Windows 7.

  2. Jan

    Hi there.
    Just a hint:
    The use of “jquery.browser” is not recommend.

  3. Nice.

    You should try this one, using same kind of code without jquery

    • There wouldn’t be a lot to it, but I don’t want to write a bunch of browser detection code with vanilla JS.

  4. Matthew F

    Jquery? Never heard of it. Must be some passing fad – I’ll stick with Mootools.

    • I’m glad I’m not the only one to think that… But whentf will mootools overtake the world? I’d written some funny stuff about jQuery vs MooTools devs but I guess it’s not moral. Or is it?

    • Hi Alex,

      Can you please share those stuff to all?

    • Francois

      Mootools still exists? Thought nobody uses that anymore.

  5. Awesome little gadget, I’ll have to try playing with this sometime.

    BTW love the little “blowing up” logo, neat little effect there.

  6. i love your site. i hope you can, if ever, release a wordpress theme just like this. i like the buttons and the effects. :)

  7. Awesome effect from a technical perspective. However, it’s not quite user friendly.

  8. Nice effects, adding ;)

  9. very nice tutorial David..

  10. i can only wish i could use some of this gr8 stuff for my clients but where i live people are for some horrible reason are stuck with IE6. goodluck on judgement day IE.

  11. Looks a bit messy, but I guess it is the point of it, isn’t it?

  12. steven

    What a nice tutorial on both javascript framework.I have made custom on this but it’s currently it’s not working on ie..

  13. Your colorscheme is quite dark. BTW, thanks for great post :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!