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. – James McLeod Sep 17 '11 at 19:11
  • 1
    It has been some time since I've seen a less usable interface than that (Gravity). – Rook Sep 17 '11 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 :) – yati sagade Sep 17 '11 at 19:17
  • 5
    @Rook - I don't think usability was ever the developer's concern :) – yati sagade Sep 17 '11 at 19:19
  • @yati - Oh! Well, in that case - job well done :) – Rook Sep 17 '11 at 22:30

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! – yati sagade Sep 17 '11 at 19:22

protected by gnat Dec 1 '16 at 21:32

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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