9

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.

gnat
  • 21,442
  • 29
  • 112
  • 288
yati sagade
  • 2,089
  • 2
  • 19
  • 27
  • 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
  • It might be interesting to note (if you don't know already) that the author of the demo in question is the primary author of three.js, and a SO user. – jwrush Aug 17 '12 at 14:51

2 Answers2

12

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
Saeed Neamati
  • 18,142
  • 23
  • 87
  • 125
5

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.

Guy Sirton
  • 1,885
  • 13
  • 15
  • 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