Feb
17

That which is typically unnoticed: Easter eggs with jQuery and 960.gs

I love digging around sites’ code and Google Chrome has made it even more of a habit. I’ve learned quite a bit just by doing said digging. That being said, we tried to incorporate some similar type “Easter Eggs” on the re-launch and re-focus of Collective Colony.

One of the first things we did was setup a simple layout grid that followed the 960 gs. Used for development purposes, as well as eye candy, it was a very straightforward and simple setup. Below is a simple snippet of the bulk of the work:

// create div, make sure it's hidden, prepend it to body
var gridElem = $('<div id="' + elemId + '"><div>`Esc`</div></div>');
var pageHeight = parseFloat($(document).height());
gridElem.height(pageHeight);
gridElem.css('display', 'none');

Once this has been “prepended” to the body, you can simply attach an event handler for the click event and use a slideIn/Out() transition.

Another “egg” that sort of came after the fact was a simple random projects sort / swap. The one tricky part to this “sort” was carrying the position as the elements shifted. This was easily resolved with two simple arrays. The first simple maps element locations, while the other maps the original states. Seen below is, again, the bulk of the work:

// Array - holds all original positions
var projectListPositionState = [];
var listKeys = [0, 1, 2, 3, 4];

// Sort positions
listKeys.sort(function() { return 0.5 - Math.random(); })

// Calculate movement and animate
projectList.each(function(key, item) {
    var movement = projectListPositionState[listKeys[key]] - projectListPositionState[key];
    $(this).stop().animate({"left": movement}, 2000);
});

I’m sure there may be a jQuery plugin that will do something very similar but I wasn’t too keen on adding another plugin thus having the server dish out another file of xyz size. Simple and efficient is what we were going for. Plus there’s nothing like the satisfaction of doing it yourself.

If you want to see either of these in action, simply click the gray box or green box in the header of our home page. The gray will display the grid, while clicking the green box will re-arrange the images in our projects section farther down the page.

-- Collin

tagged

CSS