• Is FontAwesome a Real Alternative to Css Sprites and Image Icons?

    So its decision time again, performance or user experience that’s the question! Loading multiple/large(in case of sprites) images to keep the aesthetic right and snappy performance have always been a the nightmare to any web developer. For most modern web application graphical elements like the background, shadows and rounded corners can now be done away with the help CSS3 but what can be done... Read→

    read more
  • Painting your Website with CSS – The Black Secrets

    When I started designing the CSS usage is limited to only styling the table cells or the fonts etc. They for sure evolved into something that it became the core of the UI itself. We all know the predefined color and Hex code, so lets investigate the other modes and see how the colors parameter can be implemented… Predefined/Cross-browser color names: This is the most conventional mode of adding... Read→

    read more
  • Valentine’s Day – Google Doodle

    Google is one of the company I cannot live without! I like many other even use it to check the day of the week. Doodles stands first in the list of my favourite stuff that come out their server. A special edition Doodle for Valentine’s Day is no surprise! But I should say the functionality has blown me this time.. To start with the landing page did not gain any extra fat! Google’s well... Read→

    read more
  • Amateur Photographer’s must have – 2011

    For many amateur photographers, a point and shoot with advanced features like macro and super zoom works well. But what if you want take your passion to the next level or planning of migrating to a professional grade the point and shoot don’t work. You need some serious gears, that not only enhances your photos but also shows a lot of professionalism and creates a mark of you own. Do these cost serious... Read→

    read more
  • 10 Impressive Single Page Website

    Ever came across a situation where the page content are minimal and felt it does not make any sense making a full size website? And if the client has no intention of adding more content but wants a beautiful layout with all the provided content segregated in a way that it doesn’t look like a beautified word doc. A single page website can be your best bet. Single page websites are not complicated... Read→

    read more

Interactive Animation with CSS Sprites like Google’s Jim Henson Doodle

Posted by Saran | 28th September 2011 | CSS, Creativity, Javascript, Jquery, Tips & Tricks | 0 Comments

On 24th September, Google plaster its home page with a innovative Doodle in signify Jim Henson’s 75th Birthday. It created vibes around the world because of interactive nature, even we featured it in our site (www.fore6.com/?p=506). Since that day I was planning to put a post on how that’s done! so here we go.

When I google, I found few on how that doodle was done but thats not what I wanted to have in my site but a simpler scaled down version which would serve a staring point. The script I have below is full developed from scratch so it would work for both beginners and experts. CSS SpriteI have manipulated all the CSS sprite coordinates using jQuery so that its simper to understand.

Check out the below script, its so simple that the whole function revolves around a single If/Else condition. Let get back to the CSS sprite, as you know the CSS sprite is a set of images packed into an order so that they can be called in using “Background-Position” property. Here we have this sprite which is divded into 9+9 virtual boxed of 117pixels which are manipulated using the below script. To make this script a little more readable I have added comments as “Box-1″, “Box-2″ etc., refer to the above image for reference.

var aniX = null;
var aniy = null;
$(document).ready(function(){
	aniX = $("#animation").offset().left;
	aniY = $("#animation").offset().top;
	$(document).mousedown(function(event){
		var mousePos = new Array(event.pageX, event.pageY);
		interact(mousePos, ["-356px", "-475px", "-593px"]);
	});
	$(document).mouseup(function(event){
		var mousePos = new Array(event.pageX, event.pageY);
		interact(mousePos, ["-1px", "-120px", "-238px"]);
	});
	$(document).mousemove(function(event) {
		var mousePos = new Array(event.pageX, event.pageY);
		interact(mousePos, ["-1px", "-120px", "-238px"]);
	});
});

function interact(mouseCord, aniCord){
	if (mouseCord[0] < aniX && mouseCord[1] < aniY){ // Box-1
		$("#animation").css("background-position", aniCord[0]+" 0px");
	} else if (mouseCord[0] > aniX && mouseCord[0] < aniX+117 && mouseCord[1] < aniY){ // Box-2
		$("#animation").css("background-position", aniCord[1]+" 0px");
	} else if (mouseCord[0] > aniX+117 && mouseCord[1] < aniY){ // Box-3
		$("#animation").css("background-position", aniCord[2]+" 0px");
	} else if (mouseCord[0] < aniX && mouseCord[1] > aniY && mouseCord[1] < aniY+117){ // Box-4
		$("#animation").css("background-position", aniCord[0]+" -119px");
	} else if (mouseCord[0] > aniX && mouseCord[0] < aniX+117 && mouseCord[1] > aniY && mouseCord[1] < aniY+117){ // Box-5
		$("#animation").css("background-position", aniCord[1]+" -119px");
	}else if (mouseCord[0] > aniX+117 && mouseCord[1] > aniY && mouseCord[1] < aniY+117){ // Box-6
		$("#animation").css("background-position", aniCord[2]+" -119px");
	} else if (mouseCord[0] < aniX && mouseCord[1] > aniY+117){ // Box-7
		$("#animation").css("background-position", aniCord[0]+" -237px");
	} else if (mouseCord[0] > aniX && mouseCord[0] < aniX+117 && mouseCord[1] > aniY+117){ // Box-8
		$("#animation").css("background-position", aniCord[1]+" -237px");
	} else if (mouseCord[0] > aniX+117 && mouseCord[1] > aniY+117){ // Box-9
		$("#animation").css("background-position", aniCord[2]+" -237px");
	}
}

There are three events used to get this interactivity – MouseMove, MouseUp and MouseDown. Basically the Y-coordinates are kept inside the “interact” function and the mouse position and the X-coordinates are sent to it as parameters. The style sheet below does its duty till the script kicks in and also the generic styling.

#animation{
    background-image: url("http://www.fore6.com/wp-content/uploads/2011/09/henson11-hp-1g.png");
    background-position: -120px -119px;
    background-repeat: no-repeat;
    height: 117px;
    margin: 20% auto;
    width: 117px;
}

Hope you manage to grab some ideas from this you can also see a demo here or click here to download the set of files used in the demo.

ads

Leave a Reply