Explicação do truque do Google Gravity

Não sou muito desenvolvedor de JS, mas me deparei com este site chamado Google Gravity (aqueles que não o usaram, tente fazer uma pesquisa lá - você ficará surpreso), que é uma página inicial do Google remasterizada. Desde então, estive pensando e pensando em aprender mais sobre como o cara o implementou. Tentei pesquisar no Google, mas não consegui encontrar uma boa explicação para a implementação.

Todos os gurus do JS / CSS, você pode me indicar um local onde eu possa aprender mais? Eu já sei o básico de trabalhar com jQuery e AJAX.

google

— yati sagade
fonte

Você já olhou o código fonte da página? Deve dizer apenas tudo o que você precisa saber.

— James McLeod

Já faz algum tempo desde que vi uma interface menos utilizável que essa (Gravity).

— Rook

@ James sim, deu uma olhada. Mas como eu disse, eu estava à procura de uma explicação nível superior do código - como o código é 2k + linhas, e alguma parte está muito ofuscado :)

— yati sagade

@Rook - eu não acho que a usabilidade era sempre a preocupação do desenvolvedor :)

— yati sagade

@yati - Oh! Bem, nesse caso - trabalho bem-feito :) #

— 01

Respostas:

O que ele faz, além de usar fórmulas matemáticas (para as quais você precisa ser bom em matemática), está usando as tecnologias nativas da Web, inseridas em HTML5 e CSS3.

Eu recomendo que você leia estes itens:

— Saeed Neamati
fonte

Você já viu o código-fonte javascript?

Eu apenas dei uma olhada muito rápida (e está longe da minha xícara de chá), mas parece que a página está dividida em caixas 2D e é executada uma simulação dessas caixas que caem livremente sob a gravidade. Em seguida, os eventos do mouse são manipulados para permitir que essas caixas sejam manipuladas interativamente.

— Guy Sirton
fonte

Sim, esse parece ser o caminho a seguir, mas eu poderia ter usado uma explicação de primeiro nível, pois esse também não é o meu forte. Depois de fazer uma pesquisa, até os resultados aparecem em caixas 2D móveis e os restos anteriores ainda estão lá!

— yati sagade