Feeding Those Social Critters

Posted on March 29th, 2010 by Dustin Hansen

Feeding the Animals

A friend of mine was asking about the effect I use for the social media icons in the sidebar here. I told him that's personal and I would prefer he not bring up such iniquitous filth in the polite company of my daughter. When I realized he was talking about my website, I figured I would apologize by writing up a quick article about it and some of the caveats I ran into.

There's actually not really much to the effect. I've made use of sprites, a small amount of CSS, and just a simple Javascript function aptly named socialCritters to achieve a nice UI element effect. There are a few things to keep in mind, however, so let's get to it, yea?

The Sprite

Social Media Icons Sprite

As you can see, a very simple image with each of the icons I use (and a few I am not yet using), evenly spaced for easy access via background-position.

Unfortunately I no longer have the name of the artist that designed these icons (which I usually keep in the directory with the icons themselves). If anyone does know, please contact me so I may give proper attribution.

The HTML

<a href="#" class="global-social" style="background-position: -106px 13px;">RSS 2.0</a>
<a href="#" class="global-social" style="background-position: -70px 13px;">FaceBook</a>
<a href="#" class="global-social" style="background-position: 2px 13px;">Delicious Bookmarks</a>
<a href="#" class="global-social" style="background-position: -34px 13px;">Digg Profile</a>
<a href="#" class="global-social" style="background-position: -214px 13px;">Follow me on Twitter</a>

Herein lies the caveat. It would seem as though Internet Explorer has issues with certain styles retrieved via MooTools' getStyle() method, background-position being one of them. Luckily there's an easy fix, specify the style inline. Normally I would completely advise against this, but as it is crucial to the functionality of this code, and not something likely to be effected by a global stylesheet change, it should be okay this once.

The CSS

.global-social {
	width: 36px;
	height: 32px;
	cursor: pointer;
	font-size: 0.0em;
	background: url(/library/media/icons/social/social_bar_icos.png) no-repeat;
	padding-bottom: 6px;
	border-bottom: 1px solid #111;
	border-bottom-color: rgba(155,155,155,0.2);
	margin-left: 10px;
	display: block;
	float: right;
	text-indent: -10000em;
	-moz-box-shadow: 0 2px 0 -1px #151515, 0 5px 0 -3px #393939, 0 5px 2px -3px rgba(57,57,57,0.7);
	-webkit-box-shadow: 0 2px 0 #151515, 0 5px 0 -3px #393939, 0 5px 2px rgba(57,57,57,0.7);
	box-shadow: 0 3px 4px -4px rgba(230,230,230,0.6);
}

Simple enough, right? Creates a block level element with the proper width and height, sets the background image and applies a few effects with the border and box shadow css attributes.

The Javascript

This code requires Mootools, of course. Make sure you grab 1.2.4 or 1.2.1-3 and grab the getSiblings element method from David Walsh's site.

function socialCritters() {
	$$('a.global-social').each(function(_el) {
		var bpX = $(_el).getStyle('background-position').split(" ")[0];
		_el.set('morph', {'duration':200,'link':'cancel'})
		.store('bpx', bpX)
		.addEvents({
			'mouseenter': function() {
				// Call FX.Morph and change background-position keeping the correct X offset
				this.morph({'opacity':1, 'background-position': this.retrieve('bpx') + ' 9px'});

				// Get this element's siblings and set their background-position to their defaults
				// also tone down their opacity for a more dramatic effect.
				$each(this.getSiblings('a'), function(_elem) {
					_elem.morph({'opacity':0.3, 'background-position': _elem.retrieve('bpx') + ' 13px'});
				});
			},
			'mouseleave': function() {
				// Same as mouseenter, 'cept backwards.
				this.morph({'opacity':1, 'background-position': this.retrieve('bpx') + ' 13px'});

				// make sure all elements are returned to their default positions.
				$each(this.getSiblings('a'), function(_elem) {
					_elem.morph({'opacity':1, 'background-position': _elem.retrieve('bpx') + ' 13px'});
				});
			}
		});
	});
}
window.addEvent('domready', function() { socialCritters(); });

So what's going on here? First we use the Mootools $$ function to get an array of the HTMLElements we want to work with. We use the CSS selector a.global-social to easily grab just the appropriate elements. Next we set a few default values, one for the element's Fx.Morph attribute, and the other we get the default background-position X coordinate and store it in the element storage with the key of bpx.

After that we've only to set the mouseenter and mouseleave events to trigger the animation and opacity changes required for each event.

That's all there is to it! Remember to call the socialCritters() function in an window domready event with a
window.addEvent('domready', function(){ socialCritters(); });
statement and your golden. Have fun with it and if you modify it or come up with any cool alternatives, please feel free to let me know here!

Ad Sponsers

Comments are closed.