9

When you look at the results on the google search page, you can see the google plus one button animation when you hover over the link or link description for every result.

I was searching internet but was not able to find any tutorial how to achieve this effect on a image or element in general.

Any suggestion or link to tutorial using jquery?

Thanks in advance.

lorenc55
  • 125
  • 1
  • 2
  • 5
  • 4
    Who the heck is downvoting this interesting question without leaving a comment? This is bad style. – Codo Aug 07 '11 at 07:30

1 Answers1

8

It is one image containing multiple frames. I assume The image is used as background via CSS and the background position is changed rapidly (through JavaScript) to create the animation effect.

The image is:

+1 button

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • 3
    It's called sprite animation and is how Google animated the [Martha Graham logo](http://www.google.com/logos/2011/graham.html) earlier this year. There are jQuery plugins like [Spritely](http://www.spritely.net/) to assist with rolling your own sprite based animations. – Marcel Aug 07 '11 at 08:06