Объяснение трюка Google Gravity

Я не большой разработчик JS, но я наткнулся на этот сайт под названием Google Gravity (те, кто его не использовал, попробуйте выполнить поиск там - вы будете поражены), который является ремастерированной домашней страницей Google. С тех пор я размышлял о том, как парень это реализовал. Я попробовал поискать в Google, но не смог найти хорошее объяснение реализации.

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

google

— Яти Сагаде
источник

Вы смотрели на исходный код страницы? Он должен рассказать вам обо всем, что вам нужно знать.

— Джеймс Маклеод

Прошло некоторое время с тех пор, как я увидел менее удобный интерфейс, чем этот (Gravity).

— Ладья

@ Джеймс да, посмотрел. Но, как я уже сказал, я искал объяснение кода верхнего уровня - так как код состоит из 2k + строк, а некоторая часть очень запутана :)

— yati sagade

@Rook - я не думаю, что юзабилити когда-либо волновала разработчик :)

— yati sagade

@yati - Ой! Ну, в таком случае - хорошо выполненная работа :)

— Грач

Ответы:

Помимо математических формул (для этого нужно хорошо разбираться в математике), он использует нативные веб-технологии, основанные на HTML5 и CSS3.

Я рекомендую вам прочитать эти пункты:

— Саид Нямати
источник

Вы смотрели на исходный код JavaScript?

Я просто бросил очень быстрый взгляд (и это далеко от моей чашки чая), но похоже, что страница разбита на 2-ые коробки, и имитация этих коробок свободно падает под действием силы тяжести. Затем обрабатываются события мыши, чтобы интерактивно манипулировать этими блоками.

— Гай Сиртон
источник

Да, это похоже на путь, но я мог бы сначала использовать объяснение на высшем уровне, так как это тоже не моя сильная сторона. После выполнения поиска даже результаты появляются в подвижных 2D-полях, а предыдущий мусор все еще там!

— Яти Сагаде