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

9

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

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

google Яти Сагаде
источник
2
Вы смотрели на исходный код страницы? Он должен рассказать вам обо всем, что вам нужно знать.
Джеймс Маклеод
1
Прошло некоторое время с тех пор, как я увидел менее удобный интерфейс, чем этот (Gravity).
Ладья
1
@ Джеймс да, посмотрел. Но, как я уже сказал, я искал объяснение кода верхнего уровня - так как код состоит из 2k + строк, а некоторая часть очень запутана :)
yati sagade
5
@Rook - я не думаю, что юзабилити когда-либо волновала разработчик :)
yati sagade
@yati - Ой! Ну, в таком случае - хорошо выполненная работа :)
Грач

Ответы:

12

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

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

  1. CSS переходы
  2. CSS анимация
  3. Контроль времени для анимации на основе сценариев
Саид Нямати
источник
5

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

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

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