Explication de l'astuce Google Gravity

Je ne suis pas beaucoup un développeur JS, mais je suis tombé sur ce site appelé Google Gravity (ceux qui ne l'ont pas utilisé, essayez d'y faire une recherche - vous serez étonné), qui est une page d'accueil Google remasterisée. Depuis lors, je réfléchis et me demande comment en savoir plus sur la façon dont le gars l'a implémenté. J'ai essayé de googler, mais je n'ai pas pu trouver une bonne explication de la mise en œuvre.

Tous les gourous JS / CSS, pouvez-vous me diriger vers un endroit où je peux en savoir plus? Je connais déjà les bases du travail avec jQuery et AJAX.

google

— yati sagade
source

Avez-vous regardé le code source de la page? Il devrait vous dire à peu près tout ce que vous devez savoir.

— James McLeod

Cela fait un certain temps que je n'ai pas vu une interface moins utilisable que celle (Gravity).

— Tour

@James oui, j'ai jeté un coup d'œil. Mais comme je l'ai dit, je cherchais une explication de haut niveau du code - car le code est de 2k + lignes, et une partie est très obscure :)

— yati sagade

@Rook - Je ne pense pas que la convivialité ait jamais été la préoccupation du développeur :)

— yati sagade

@yati - Oh! Eh bien, dans ce cas - travail bien fait :)

— Tour

Réponses:

Ce qu'il fait, en plus d'utiliser des formules mathématiques (pour lesquelles, vous devez être bon en mathématiques), utilise les technologies natives du Web sous HTML5 et CSS3.

Je vous recommande de lire ces articles:

— Saeed Neamati
source

Avez-vous regardé le code source javascript?

Je viens de jeter un coup d'œil très rapide (et c'est loin de ma tasse de thé) mais il semble que la page soit divisée en boîtes 2D et qu'une simulation de ces boîtes tombant librement par gravité soit exécutée. Les événements de souris sont ensuite traités pour permettre à ces boîtes d'être manipulées de manière interactive.

— Guy Sirton
source

Oui, cela semble être la voie à suivre, mais j'aurais pu utiliser une explication de premier niveau, car ce n'est pas non plus mon fort. Après avoir fait une recherche, même les résultats apparaissent dans des cases 2D mobiles, et les débris précédents sont toujours là!

— yati sagade