I am not much of a JS developer, but I stumbled upon this site called Google Gravity (those who haven't used it, try doing a search there - you'll be amazed), which is a remastered Google homepage. From then on, I've been thinking and wondering about learning more on how the guy implemented it. I tried googling, but could not find a good explanation of the implementation.

All the JS/CSS Gurus, can you point me to a location where I can learn more? I already know the basics of working with jQuery and AJAX.

  • 2
    Have you looked at the source code for the page? It should tell you just about everything you need to know. Sep 17, 2011 at 19:11
  • 1
    It has been some time since I've seen a less usable interface than that (Gravity).
    – Rook
    Sep 17, 2011 at 19:12
  • 1
    @James yes, had a look. But as I said, I was looking for a top level explanation of the code - as the code is 2k+ lines, and some part is very obfuscated :) Sep 17, 2011 at 19:17
  • 5
    @Rook - I don't think usability was ever the developer's concern :) Sep 17, 2011 at 19:19
  • @yati - Oh! Well, in that case - job well done :)
    – Rook
    Sep 17, 2011 at 22:30

2 Answers 2


What it does, besides using mathematical formulas (for which, you have to be good at math), is using the native technologies of web coming under HTML5 and CSS3.

I recommend that you read these items:

  1. CSS Transitions
  2. CSS Animation
  3. Timing Control for Script-Based Animations

Have you looked at the javascript source code?

I just took a very quick look (and it's far from my cup of tea) but it looks like the page is broken up into 2d boxes and a simulation of those boxes free falling under gravity is ran. Then the mouse events are handled to allow those boxes to be interactively manipulated.

  • Yes, that seems like the way to go, but I could have used a top level explanation first, as this is not my forte, either. After doing a search, even the results appear in movable 2D boxes, and the previous debris is still there! Sep 17, 2011 at 19:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.