Thinking about animation, the first thing which comes to mind is Flash.
Well, this is not the case with most of the google doodle. Google has an interesting way of animating the doodles. It uses CSS sprites along with javascript for animation.
As this being the first post, will explain how did google animated this.
Will be explaining this only using jquery and CSS. Lets keep it simple.
Later in this post will be sharing some of the tools that can be used for animation.
As it is rightly said you should ask the right questions, lets begin with finding answers for the following questions:
- What is CSS Sprite?
- How to generate it?
- How to change a CSS property using javascript?
- Complete HTML, CSS and JS code.
- Demo
- Understanding the Javascript.
- Why use CSS sprite and not use flash?
- Any Tools to create CSS Sprite?
What is CSS Sprite?
- It’s just combining 2 or more images into a single image and transferring the one big image to the client’s browser. By doing this we save bandwidth and the number of http requests. This also helps in reducing page loading time. For more detailed information and stats read here.
- CSS Sprite is mostly used for changing the background of a button when the mouse is hovered over the button or when the button is clicked.
- One of the image which google uses is
- As can be seen, every image which is combined is a state or a frame in the animated doodle.
How to generate CSS Sprite?
- Any tools which is capable of combining images can be used to generate it. If you know photoshop, then it can be created in a matter of seconds.
- Well for those who prefer online tools, can refer here to create their sprite. Just make your frames and upload it, the tool will create sprite for you.
How to change CSS property using javascript?
- Well this is really easy using jquery.
- Lets say you want to change the background color of a div tag with id as my-content you just need to do the following:
$("#my-content").css("background-color", "red");
- Google uses the background-position property of css to change the background of the div.
Complete HTML, CSS and JS code
<html>
<head>
<style>
#my-content{
width:46px;
height:144px;
background:url('http://www.google.com/logos/2011/henson11-hp-6ea-lr.png') 0 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 120;
var step = 45;
var current = 0;
var imageWidth = 2925;
var headerWidth = 0;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#my-content').css("background-position",current+"px 0");
}
$(document).ready(function(){
$("#my-content").click(function(){
setInterval("scrollBg()", scrollSpeed);
});
});
</script>
</head>
<body>
<div id="my-content">
</div>
</body>
</html>
Demo
- Copy the above code and paste it in a file.
- Save it as an html file.
- Open it in a web browser.
Understanding the Javascript
Following is the code which animates the above character.
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 120;
var step = 45;
var current = 0;
var imageWidth = 2925;
var headerWidth = 0;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#my-content').css("background-position",current+"px 0");
}
$(document).ready(function(){
$("#my-content").click(function(){
setInterval("scrollBg()", scrollSpeed);
});
});
</script>
- The above code just changes the background every 120 ms. It basically shifts the background image by 45px to the left every 120 ms.
- Have used setInterval function of javascript to have a delay of 120ms between every image shift.
Why use CSS sprite and not use flash?
There is a lot of debate on this question.
Why not to use flash?
- Its heavy to use flash for such small animations. The site loading time increases.
- Its not SEO friendly.
- Needs plugin to run it.
Whats the future?
- The answer is very straight forward. The future of internet is HTML5!
Adobe has recently created a site completely in HTML5 known as “The Expressive Web”
This site is completely a non-flash website.
Any Tools to create CSS Sprite?
Yes there are many tools to create / animate images.
- Generate CSS Sprite images using : http://csssprites.com/
- To animate your css image use http://spritely.net/
- This is really good plugin used for animation.
- Example of the same will be in the upcoming posts.
- Photoshop is always a web developers friend.
Conclusion
The whole idea of writing this post was just to
- Encourage developers to develop non-flash based websites.
- Use javascript for animations.
- Explore the power of HTML5.
Thanks for reading.
