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
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

  • By
    Making the Firefox Logo from HTML

    When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt. That had to change. The basic...


  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!