Пояснення трюку Google Gravity

Я не дуже розробник JS, але я натрапив на цей сайт під назвою Google Gravity (ті, хто його не використовував, спробуйте здійснити пошук там - ви будете вражені), що є переробленою домашньою сторінкою Google. Відтоді я думав і цікавився дізнатися більше про те, як хлопець це реалізував. Я спробував googling, але не зміг знайти хорошого пояснення реалізації.

Всі гуру JS / CSS, чи можете ви вказати мені місце, де я можу дізнатися більше? Я вже знаю основи роботи з jQuery та AJAX.

google

— yati sagade
джерело

Ви подивилися вихідний код сторінки? Він повинен розповісти вам про все, що вам потрібно знати.

— James McLeod

Минуло певний час, як я бачив менш корисний інтерфейс, ніж цей (Gravity).

— Грак

@James так, подивився. Але, як я вже говорив, я шукав пояснення коду верхнього рівня - як код 2k + рядки, а якась частина дуже

— затуманена

@Rook - Я не думаю, що зручність коли-небудь хвилювала розробника :)

— yati sagade

@yati - О! Ну, в такому випадку - робота добре виконана :)

— Грак

Відповіді:

Окрім використання математичних формул (для яких ви повинні бути хорошими в математиці), це використання нативних технологій Інтернету, що знаходяться під HTML5 та CSS3.

Рекомендую прочитати ці пункти:

— Саїд Неаматі
джерело

Ви подивилися вихідний код javascript?

Я просто дуже швидко поглянув (і це далеко не моя чашка чаю), але схоже, що сторінка розбита на 2d коробки і запускається імітація тих вікон, які потрапляють під тяжкість. Потім обробляються події миші, щоб дозволити інтерактивно маніпулювати цими полями.

— Гай Сіртон
джерело

Так, це виглядає як шлях, але я міг би спочатку використати пояснення верхнього рівня, оскільки це теж не моя форте. Після проведення пошуку навіть результати з’являються у рухомих 2D коробках, а попереднє сміття все ще є!

— yati sagade