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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

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!