Erklärung des Google Gravity-Tricks

Ich bin kein großer JS-Entwickler, aber ich bin auf diese Website namens Google Gravity gestoßen (diejenigen, die sie nicht verwendet haben, versuchen dort eine Suche durchzuführen - Sie werden erstaunt sein), bei der es sich um eine überarbeitete Google-Startseite handelt. Von da an habe ich darüber nachgedacht und mich gefragt, wie der Typ es umgesetzt hat. Ich habe versucht zu googeln, konnte aber keine gute Erklärung für die Implementierung finden.

Können Sie mich bei allen JS / CSS-Gurus auf einen Ort hinweisen, an dem ich mehr erfahren kann? Ich kenne bereits die Grundlagen der Arbeit mit jQuery und AJAX.

google

— Yati Sagade
quelle

Haben Sie sich den Quellcode für die Seite angesehen? Es sollte Ihnen fast alles sagen, was Sie wissen müssen.

— James McLeod

Es ist einige Zeit her, dass ich eine weniger benutzerfreundliche Oberfläche als diese gesehen habe (Schwerkraft).

— Turm

@ James ja, habe mal nachgesehen. Aber wie gesagt, ich suchte nach einer Erklärung des Codes auf oberster Ebene - da der Code mehr als 2k + Zeilen enthält und ein Teil sehr verschleiert ist :)

— Yati Sagade

@Rook - Ich glaube nicht, dass die Benutzerfreundlichkeit jemals das Anliegen des Entwicklers war :)

— Yati Sagade

@yati - Oh! Nun, in diesem Fall - gute Arbeit geleistet :)

— Turm

Antworten:

Neben der Verwendung mathematischer Formeln (für die man gut in Mathematik sein muss) werden die nativen Webtechnologien verwendet, die unter HTML5 und CSS3 fallen.

Ich empfehle Ihnen, diese Artikel zu lesen:

— Saeed Neamati
quelle

Haben Sie sich den Javascript-Quellcode angesehen?

Ich habe nur einen kurzen Blick darauf geworfen (und es ist weit von meiner Tasse Tee entfernt), aber es sieht so aus, als ob die Seite in 2D-Boxen aufgeteilt ist und eine Simulation dieser Boxen durchgeführt wird, die unter der Schwerkraft frei fallen. Anschließend werden die Mausereignisse behandelt, damit diese Felder interaktiv bearbeitet werden können.

— Guy Sirton
quelle

Ja, das scheint der richtige Weg zu sein, aber ich hätte zuerst eine Erklärung auf höchster Ebene verwenden können, da dies auch nicht meine Stärke ist. Nach einer Suche werden sogar die Ergebnisse in beweglichen 2D-Feldern angezeigt, und die vorherigen Trümmer sind noch vorhanden!

— Yati Sagade