Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

Thanks,

Yati Sagade

share|improve this question
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
show 1 more comment

2 Answers

up vote 10 down vote accepted

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
share|improve this answer
add comment

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.

share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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