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.

The HTML

<div id="followIcons">
	<a href="http://feeds2.feedburner.com/Bludice" id="iconRSS">RSS Feed</a>
	<a href="http://twitter.com/davidwalshblog" id="iconTwitter">@davidwalshblog Twitter</a>
	<a href="http://github.com/darkwing" id="iconGitHub">@davidwalshblog Twitter</a>
	<a href="http://del.icio.us/dwizzlestar" id="iconDelicious">dwizzlestar de.licio.us</a>
	<a href="http://facebook.com/davidwalsh83" id="iconFacebook">David Walsh Facebook</a>
	<a href="http://linkedin.com/in/davidjameswalsh" id="iconLinkedIn">David Walsh LinkedIn</a>
	<a href="skype:davidwalsh83?chat" id="iconSkype">David Walsh Skype</a>
	<a href="mailto:david@davidwalsh.name" id="iconMail">David Walsh Email</a>
	<a href="http://mootools.net/forge/profile/davidwalsh" id="iconForge">David Walsh MooTools Forge</a>
</div>

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

The CSS

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	{
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
}

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)");
		},resetPlace);
		resetPlace();
	});
	
});

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
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

Discussion

  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.

    http://api.jquery.com/jQuery.browser/

  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..
    http://bit.ly/free-pagination

  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!