Penjelasan trik Google Gravity

Saya bukan pengembang JS, tapi saya menemukan situs ini bernama Google Gravity (mereka yang belum menggunakannya, coba lakukan pencarian di sana - Anda akan kagum), yang merupakan homepage Google remaster. Sejak saat itu, saya telah berpikir dan bertanya-tanya tentang belajar lebih banyak tentang bagaimana pria itu menerapkannya. Saya mencoba googling, tetapi tidak dapat menemukan penjelasan yang baik tentang implementasinya.

Semua JS / CSS Gurus, dapatkah Anda mengarahkan saya ke lokasi di mana saya dapat mempelajari lebih lanjut? Saya sudah tahu dasar-dasar bekerja dengan jQuery dan AJAX.

google

— yati sagade
sumber

Sudahkah Anda melihat kode sumber untuk halaman? Ini harus memberi tahu Anda tentang semua yang perlu Anda ketahui.

— James McLeod

Sudah beberapa waktu sejak saya melihat antarmuka yang kurang bermanfaat dari itu (Gravity).

— Benteng

@ Ya, lihatlah. Tapi seperti yang saya katakan, saya sedang mencari penjelasan tingkat atas dari kode - karena kode adalah 2k + baris, dan beberapa bagian sangat dikaburkan :)

— yati sagade

@Rook - Saya tidak berpikir kegunaan pernah menjadi perhatian pengembang :)

— yati sagade

@yati - Oh! Nah, dalam hal ini - pekerjaan dilakukan dengan baik :)

— Rook

Jawaban:

Apa yang dilakukannya, selain menggunakan rumus matematika (untuk itu, Anda harus pandai matematika), menggunakan teknologi asli web yang berasal dari HTML5 dan CSS3.

Saya sarankan Anda membaca item ini:

— Saeed Neamati
sumber

Sudahkah Anda melihat kode sumber javascript?

Saya hanya mengambil pandangan yang sangat cepat (dan itu jauh dari cangkir teh saya) tetapi sepertinya halaman tersebut dipecah menjadi kotak 2d dan simulasi kotak-kotak yang jatuh bebas di bawah gravitasi dijalankan. Kemudian peristiwa mouse ditangani untuk memungkinkan kotak-kotak itu dimanipulasi secara interaktif.

— Guy Sirton
sumber

Ya, sepertinya itu cara yang harus ditempuh, tetapi saya bisa menggunakan penjelasan tingkat atas terlebih dahulu, karena ini juga bukan keahlian saya. Setelah melakukan pencarian, bahkan hasilnya muncul dalam kotak 2D bergerak, dan puing-puing sebelumnya masih ada!

— yati sagade