O'Reilly

Create Spinning, Fading Icons with CSS3 and MooTools

By on  

A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I didn't want to abandon CSS animations completely though;  I added a bit of MooTools to randomize the icon's initial display position and rotation.  Let me show you how to use CSS3 and MooTools to create dymanic, rotating elements.

The HTML

We'll use the standard, accessible, SEO-friendly HTML for link creation:

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

CSS will make these links pretty.

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 MooTools 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.

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 200, availableHeight = 40;

// Find the appropriate prefix icon
var cssPrefix = false;
switch(Browser.name) {
	case "safari":
		cssPrefix = "webkit";
		break;
	case "chrome":
		cssPrefix = "webkit";
		break;
	case "firefox":
		cssPrefix = "moz";
		break;
	case "opera":
		cssPrefix = "o";
		break;
	case "ie":
		cssPrefix = "ms";
		break;
}

// The Icons
var icons = $$("#followIcons a");
// Apply opacity
var zIndex = 1000;

// Randomize each link
icons.each(function(element,index) {
	// Generate the random rotation amount
	var startDeg = $random(360);
	// Place the image at the default rotation and opacity
	var resetPlace = function() {
		element.fade(0.6).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
	};
	// Randomly position the element
	element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
	// Rotate the image initially
	resetPlace();
	// Add events
	element.addEvents({
		mouseenter: function() {
			element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");
		},
		mouseleave: 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.

And there you have it:  spinning, fading, animated elements.  What's the alternative?  Static, boring, traditional icons.   What do you think?  Too much?  Too little?  Share your ideas!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

Discussion

  1. Arian

    Why not test really for the prefix: http://jsfiddle.net/arian/sEVYY/

    besides prefix for ie is ms. Also to be future proof you should have something that will work when no prefix is needed anymore.

    You can use Number.random(0, 360) too btw, instead of your own random function.

    But it’s a nice effect for sure :)

  2. A quick update has been made for the purposes of Chrome.

  3. Matthew F

    Cute but it seems like it detracts from readability/usability…

  4. tampe125

    great!
    but sometimes icons overlap, is there a way to prevent that?

  5. Thank you so much for the codes! I’m in the process of installing them in my website as well.

    I don’t know if this is redundant, especially for you as a moo tools developer, but I would add in the instructions to add the

    … just for newcomers or peeps who stumble upon :)

  6. oopps the codes were snipped up… i meant to add in src=”https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js for javascript as well :)

  7. siddhesh

    is there anyway that the icons dont overlap please tell me how can that happen??

  8. Marcel Hadorn

    Very Nice, but this doesn’t work in IE9, although IE supports -ms-transform, and for example http://contrastrebellion.com did make use of this with jQuery. Wasn’t yet able to find the issue, if you do, please let us know.

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

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...