Spiegazione del trucco di Google Gravity

Non sono uno sviluppatore di JS, ma mi sono imbattuto in questo sito chiamato Google Gravity (chi non lo ha utilizzato, prova a fare una ricerca lì, rimarrai stupito), che è una home page rimasterizzata di Google. Da allora in poi, ho pensato e mi chiedevo come imparare di più su come il ragazzo lo ha implementato. Ho provato a cercare su Google, ma non sono riuscito a trovare una buona spiegazione dell'implementazione.

Tutti i guru di JS / CSS, mi potete indirizzare verso un luogo dove posso saperne di più? Conosco già le basi per lavorare con jQuery e AJAX.

google

— Yati Sagade
fonte

Hai guardato il codice sorgente per la pagina? Dovrebbe dirti tutto ciò che devi sapere.

— James McLeod,

È passato del tempo da quando ho visto un'interfaccia meno utilizzabile di quella (Gravity).

— Rook,

@James sì, ho dato un'occhiata. Ma come ho detto, stavo cercando una spiegazione di alto livello del codice - poiché il codice è 2k + righe e una parte è molto offuscata :)

— Yati Sagade,

@Rook - Non credo che l'usabilità sia mai stata la preoccupazione dello sviluppatore :)

— Yati Sagade,

@yati - Oh! Bene, in quel caso - lavoro ben fatto :)

— Torre

Risposte:

Quello che fa, oltre ad usare formule matematiche (per le quali, devi essere bravo in matematica), sta usando le tecnologie native del web che passano sotto HTML5 e CSS3.

Ti consiglio di leggere questi articoli:

— Saeed Neamati
fonte

Hai guardato il codice sorgente javascript?

Ho appena dato una rapida occhiata (ed è lontano dalla mia tazza di tè) ma sembra che la pagina sia suddivisa in scatole 2d e che venga eseguita una simulazione di quelle scatole che cadono libere sotto gravità. Quindi gli eventi del mouse vengono gestiti per consentire a tali caselle di essere manipolate in modo interattivo.

— Guy Sirton
fonte

Sì, sembra la strada da percorrere, ma avrei potuto usare prima una spiegazione di alto livello, dato che non è nemmeno il mio forte. Dopo aver effettuato una ricerca, anche i risultati vengono visualizzati in caselle 2D mobili e i detriti precedenti sono ancora lì!

— Yati Sagade,