As I am continuing to refine the design on the new look BondGeek website I wanted to make the toolbox page a little more animated. I decided to have the square icons dropdown to reveal a text link for some of the icons that were not obvious what they are, unless you followed the link over the image. You can see the animation in action here

I have always liked the way that the tiles drop down on the Windows Phone 7 home screen for contacts, where the image slides down to reveal the name, so decided to adopt an approach similar to that.

The code shown below is called when the toolbox page loads and gets the collection of images wrapped inside a div with the .image_wrapper class and animates all of them in a random fashion with a random interval. This is done by calling the Peek() method on a timer.

One thing you will notice is that the background-color of div.image_wrapper is set to #ffffff. This is so that the white text of the link text does not show through when the image slides up.

Each of the square images also has a hover event on it so that the animation can be manually fired to reveal the link text. This also pauses the timer whilst you are hovered over an image so the automatic animation pause

Code below the break

This is the code executed when the page is loaded that does all the hard work.

var images; var currentIndex = -1; var interval = 1; var timer; var hovered = false; var hoverItem; $(document).ready(function () { images = $(".imagewrapper img"); BindImageHoverEvents(); interval = Math.floor( Math.random() * 8 ) timer = setTimeout("Peek()", interval * 1000); }); function Peek() { if (hovered) { clearTimeout(timer); setTimeout("Peek()", 1000); return; } clearTimeout(timer); if (currentIndex != -1) { $(images[currentIndex]).animate({ top: 0 }, 150, "swing", function () { $(images[currentIndex]).parent().parent().css("background-color", "#ffffff"); }); } var oldIndex = currentIndex; while (oldIndex == currentIndex) { currentIndex = Math.floor(Math.random() * images.length); } $(images[currentIndex]).animate({ top: 40 }, 150, "swing", function () { $(images[currentIndex]).parent().parent().css("background-color", "transparent"); interval = Math.floor(Math.random() * 6) while (interval < 2) { interval = Math.floor(Math.random() * 6) } timer = setTimeout("Peek()", interval * 1000); }); } function BindImageHoverEvents() { $("div.square").hover(function (event) { hoverItem = $(this); event.stopPropagation(); $(hoverItem).find("div.imagewrapper").css("background-color", "transparent"); $(hoverItem).find("img").animate({ top: 40 }, 150, "swing", function () { }); hovered = true; }, function (event) { hoverItem = $(this); event.stopPropagation(); $(hoverItem).find("div.image_wrapper").css("background-color", "#ffffff"); $(hoverItem).find("img").animate({ top: 0 }, 150, "swing", function () { }); hovered = false; }); }

And this is the CSS required to enable the slide down to work.

.imagewrapper{height:152px;width:152px;overflow:hidden;background-color:#ffffff;z-index:100;} .imagewrapper img{position:relative;display:block;top:0px;}

I love my job Smile