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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

  • By
    Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

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!