Демонстрация возможностей HTML5 на главной странице Google.com

    Сегодня, 7.09.2010, в день рождения Google, прямо на главной странице google.com, если смотреть с помощью Firefox, Safari или Chrome, можно увидеть HTML5 в действии.
    Логотип «Google» состоит из разноцветных шариков, которые разлетаются в стороны, если навести курсор.
    В IE8 эффект работает, но все шарики одного размера, что смотрится не так красиво.



    Видео, демонстрирующее эффект (спасибо хабрапользователю Defite):


    P.S. Работает также и на google.ru. Возможно, показывается не всем пользователям.

    P.P.S. Как правильно отметили хабрапользователи ryuzaki_spb и Ogra, от HTML5 там только doctype =)
    Шарики — это куча абсолютно позиционированных div со свойством border-radius.

    3 P.S. А ещё можно потрясти окно браузера! (спасибо хабрапользователю larikov !)
    Метки:
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 154
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Вот сейчас, мне показывается на Google Russia, но не показывается на google.com.
        И там и там много раз чистил куки и обновлял. На ru всегда показывается, на com 15 минут назад показывался, сейчас — уже нет.
        • +2
          Ubuntu 10.04
          FF 3.6.8

          Есть шарики :)

          Не уверен, что Гугл выбирал пользователей
          • –1
            У меня FF 3.6.8, Gentoo нет шариков. Гугль страдает разизмом по отношению к разным дистрибутивам?
            • 0
              Упс, внизу прочитал, что нужно включить html5, после чего начало работать на гугле.ру. Впечатляет :)
          • 0
            Смешные шарики )
            (Fedora 12:, в Хроме 5.0.375.99 все ок, в ФайрФоксе 3.5.10 — медленнее, в Опере — нет вообще)
            • +1
              Чтобы появилось в Опере надо у нее сменить идентификатор браузера на FireFox )
              (ПКМ — Настройки для сайта — Сеть — Идентификация браузера)
              У меня на 10.61 все красивенько летает )

              Кстати аффтор… добавь в пост, а то операфаны негодуэ )
              • +2
                Специально Оперу гнобят :(
          • 0
            Забавно, что никто, кому я с утра предложил посмотреть на новый вариант логотипа, ничего не увидел. Всё стандартно.
            И да, у всех была Опера.
            Я уж подумал, что я особенный:) Хотя у меня Файрфокс.
            А так да, забавно. Развлечение на работе.
            • –1
              Может у тех, кому ты предлагал выбрана персональная тема и бубл не показывается?
              • 0
                Они все гуглоненавистники и не знают, что такое «персональная тема».
                • +7
                  «гуглоненавистники» — а вот и причина :)
              • +3
                Гугл не любит оперу. Нужно в опере включить Прикидоваться шлангом Маскироваться под Firefox.
              • +1
                я увидел
                • –2
                  На самом деле в любом браузере работает, только в ослике попроще выглядит.
                • +3
                  Вижу почему-то только на google.ru, на доткоме старое лого (Ctrl+R не помогает).
                  Если отрубить javascript — то тоже автоматом старый логотип.

                  HTML5 не вижу вообще. Там огромная портянка абсолютно позиционированных дивов, единственное, что у них есть от модерновых технологий — border-radius из css3.

                  Но смотрится, конечно, мегакруто. Я бы не выдержал такой скрипт писать.
                  • +5
                    Из html5 там вот что:
                    <!doctype html>
                    • 0
                      оно там очень давно
                    • 0
                      Добавил P.P.S.
                      • 0
                        «Демонстрация возможностей border-radius на главной странице Google.com».
                        Да, как-то не звучит.
                        • +2
                          Скорее уже «Демонстрация возможностей javascript-гуру на главной странице Google.com» :)
                      • +1
                        Увидел только на google.ru, на коме действительно все по-прежнему. Браузер — хром.
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • –12
                            Firefox ok
                            • 0
                              Да, у меня на фоксе в убунте тоже работает.
                              • +2
                                Хочу амные программы.
                                • –3
                                  «Вау, круто, Вы юзаете Гугл Докс, респект!»
                                  Вы же это хотели услышать? ))
                                  • –2
                                    Я хотел показать, что в мозиле тоже работает. Фанаты такие фанаты, да.
                                  • 0
                                    This account's public links are generating too much traffic and have been temporarily disabled!
                                • –9
                                  я с просоня шуганулся чуть, на весь экран шарики поскакали (24 дюйма мониторчик)
                                  Но классно сделали ;)
                                  • +9
                                    «Вау, круто, У вас 24 дюйма, респект!»
                                    Вы же это хотели услышать? ))
                                    • +5
                                      Он хотел услышать «Вау, круто, я тоже хочу в 12 часов вставать»)
                                  • +1
                                    В Фоксе под виндой хорошо, только надо включить HTML5 в about:config.
                                    • 0
                                      В версии 3.6.10 такое есть?
                                      • +2
                                        У меня 3.6.8

                                        • 0
                                          Может в финалке и есть… а вот в Намороке 3.6.10 почему-то нет. Либо какое-то расширение предоставляет такие настройки?
                                          • +1
                                            Да вроде не, кажется, родная опция…
                                          • 0
                                            Проверил. Очень странно. В Файерфоксе 3.6.8 и Майнфилде «4.0 бета 6 пре» эта настройка есть, а в промежуточной Намарока 3.6.10 нет… :(
                                      • +7
                                        Ставим в опере «Представляться как Firefox» и идем на google.ru — все работает. А вообще — это же дискриминация какая то!
                                        • +6
                                          Имя этой дискриминации — Опера.
                                          • –3
                                            это не дискриминация, а нормальная политика отдела разработчиков. Лучше пользователь в своем любимом браузере будет видеть стабильно работающий сайт, который не отожрет оперативки или вообще положит браузер, чем увидит какую-то аццки некрасивую и глючащую фичу, после которой будет ходить и говорить «во в %companyname% ламерье работает! у меня в %browsername% все поразъехалось!»

                                            так что это не дискриминация, а забота о нервах пользователя и о собственном имидже
                                            • +2
                                              Тем не менее, browser sniffing, как мне казалось, давно уже считается плохим тоном.
                                              • –2
                                                сниффинг в плане ИЕ, мне кажется, абсолютно оправдан)
                                                • +1
                                                  Для этого есть conditional comments.
                                              • +7
                                                который не отожрет оперативки или вообще положит браузер
                                                Это вы про «Оперу» сейчас говорили?
                                                • +2
                                                  Я не помню когда последний раз мне плохо делала опера, но вот хром уже несколько раз в BoD кидал машину. Проблема весьма известная и до сих пор не решена.
                                                  • 0
                                                    Прошу прощения, в BSoD.
                                                    • 0
                                                      странно, пользуюсь Хромом давно, и ни разу такого не было, ни на каком из 4-х вариантов…
                                                      сам Chrome падал, но BSoD — никогда
                                                    • +4
                                                      Действительно. Нельзя допустить, что б скрипт в опере работал плавнее, чем в собственном детище.
                                                      Надо обязательно позаботится о пользователе, дабы он расстроился и таки поставил хром.
                                                    • +8
                                                      Оперу вообще казнить надо. Местами хуже чем ИЕ. И версий столько что во всех замучаешься отлаживать.
                                                      Это не наезд, а крик души вырвавшийся из собственного опыта.
                                                      • +6
                                                        забыл уже когда последний раз в опере косяки большие появлялись при вёрстке. А под кучу версий можно не подстраиваться, операфаны довольно резво обновляются до свежих релизов.
                                                        • +1
                                                          Тем не менее, в интернетах еще достаточно много юзеров с оперой 9.6, например. А глюки в основном не по верстке, а с JS, хотя и с версткой бывало немало всякого.
                                                          • 0
                                                            Вот вам пример, напарывался в реальном проекте.
                                                            Тестовая страница: dl.dropbox.com/u/998228/LOR/inline-block-test/test.xhtml
                                                            Результат рендеринга: dl.dropbox.com/u/998228/LOR/browsers-render.png

                                                            В целом проблем с версткой и скриптами в опере на порядок меньше, чем в ослике. Очень редко приходится что-то специально под нее затачивать. Но если уж что-то случилось, то отлаживать очень тяжело, оперовская стрекоза абсолютно неюзабельна, даже по сравнению с отладчиком в IE :(
                                                            • 0
                                                              У меня вот в хроме косячит ваша тестовая.
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                • +1
                                                                  Я только надеюсь, что так и должно быть
                                                                  img840.imageshack.us/img840/339/chromef.png
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                    • 0
                                                                      В результатах оно на одной линии и не съезжает вниз.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                      • 0
                                                        Просьба всем, кого не устраивает дискриминация, отписаться тут: www.google.ru/support/forum/p/web+search/thread?tid=6c8335ba706d48fc&hl=ru
                                                      • 0
                                                        Готов убивать разработчиков за их мнения о том, что мне показывать, а что не показывать %)
                                                        Чтобы пользоваться новым поиском картинок на гугле приходится маскировать браузер под Firefox >_<
                                                        • 0
                                                          А мне новый поиск по картинкам не нравится…
                                                          • +1
                                                            Понимаете, они показывают новые фичи только для тех браузеров, для которых они эти фичи тестировали… В принципе это весьма верный подход. У оперы же слишком низкий охват рынка и гуглу на неё просто наплевать…
                                                            • +1
                                                              Это не мешает сделать сделать ссылку по которой включается новый функционал.
                                                              • –1
                                                                В Украине доля Оперы существенна
                                                                • +3
                                                                  Доля Украины в интернете несущественна.
                                                                  • 0
                                                                    И что это меняет? если компания работает только на территории Украины, то ей интересна только эта аудитория. 10-12 млн. человек, кому как, для меня и моей компании это существенная аудитория
                                                            • +2
                                                              Работает и в Опере, только надо поставить «представляться как FireFox» — про неё опять забыли.
                                                              • +1
                                                                работает на винде в ФФ и Хроме =)
                                                                Прикольно =)))
                                                                Можно даже поиграться — удерживать какой-нибудь шарик в стороне, чтобы не вернулся в кучу логотипа =)
                                                                • +2
                                                                  Попробуйте так с несколькими шариками. На работе — самое то.
                                                                • 0
                                                                  У меня под фф 3.6.8 только после изменения user-агента заработало.
                                                                  Может кому пригодится — поставил «Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.514.0 Safari/534.7»
                                                                  • 0
                                                                    Под IE 8 работает, но шарики меньше… и даже с таким размером подтормаживает.
                                                                    • +4
                                                                      Получается, обделили только любителей жанра музыкально-драматического искусства… т.е. Опера.
                                                                      • 0
                                                                        Не впервой) Новый поиск картинок нам тоже не показывают)
                                                                        • –2
                                                                          Вам повезло, новый поиск картинок очень не удобен.
                                                                      • +1
                                                                        Opera 10.61. Debian GNU\Linux. Шариков нет
                                                                        • 0
                                                                          Попробуйте включить browser identification = masquerade as Firefox, под Windows помогает. Кстати, этот же трюк позволяет пользоваться в Opera новым Infinite Scroll в Google Image Search.
                                                                        • 0
                                                                          Лично у меня — под виндой под Chrome 6 — работает отменно, причем в IE шарики не меняются в размерах, а только ползают.
                                                                          В Chrome же — полный функционал)))
                                                                          Красота)
                                                                          • +24
                                                                            Еще можно окно браузера потрясти :)
                                                                            • +9
                                                                              Со мной явно что-то не так, раз я начал трясти монитор. Пойду кофейку попью.
                                                                              • +1
                                                                                Chomium 7.0.515.0 x64 linux — трясутся только когда мышку отпустишь (
                                                                                • 0
                                                                                  Chromium 6.0.472.53, x32, Linux, KDE 4.5 — «полёт» нормальный. Firefox 3.6.8 — тоже.
                                                                                  • 0
                                                                                    FF 3.6.8 x64 (Gnome 2.30.2) так же, при перетаскивании окна прыгают когда отпущу мышь.
                                                                                  • 0
                                                                                    Aero Snap (или как оно там) в Windows 7 с ума сходит :)
                                                                                    • 0
                                                                                      Особенно шикарно это смотрится с «вязкими окнами» в компизе. :)
                                                                                    • –1
                                                                                      IE 8, XP SP3 — works fine! Иногда не выдается!
                                                                                      • –1
                                                                                        в десятой опере косящей под фф фсё работает
                                                                                        • 0
                                                                                          всё кроме тряски окном
                                                                                          • 0
                                                                                            Тряска тоже работает, только надо трясти вкладку внутри окна, а не само окно.
                                                                                            Окно реагирует только на восстановление-разворачивание.
                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                          • +1
                                                                                            Гугл остановил работу ИТ отдела в моей компании :)
                                                                                            • 0
                                                                                              Под Opera работает. Просто «не надо определять мой браузер» ©. «Identify as Firefox» в настройках решает проблему.
                                                                                              • 0
                                                                                                Стыжусь, но не могу найти это поле в настройках. Ну или как это в opera:config называется?
                                                                                                • +2
                                                                                                  Проще всего: Shift+F12 -> Кнопки -> Настройки -> Перетаскиваете «Представляться как...» на удобную панель.
                                                                                                  • 0
                                                                                                    ПКМ на странице конкретоного сайта — Настройки для сайта — Сеть. И там выбор есть.
                                                                                                • 0
                                                                                                  Не работает FF4.0b4, Chrome 7.0.503.0 dev, XPsp3.
                                                                                                  • 0
                                                                                                    В проксе дело было.
                                                                                                  • 0
                                                                                                    У меня работает во всех браузерах (хром, лиса, IE).
                                                                                                    Но почему-то только на google.ru
                                                                                                    .ком открывается обычным.
                                                                                                    • 0
                                                                                                      Всем отделом ловим шарики. Если верить диспетчеру, то проц тоже грузится прилично из-за них.
                                                                                                      • +2
                                                                                                        Не вы, случайно, всем отделом правительственные сайты делаете?
                                                                                                    • +1
                                                                                                      Кипр
                                                                                                      не показывается нигде
                                                                                                      • +1
                                                                                                        Гугл в очередной раз удивляет своей непосредственностью и открытостью. Не могу представить подобную штуку на microsoft.com.
                                                                                                        • +2
                                                                                                          ааааа, черт, залип минут на 10 гоняя эти шарики по экрану
                                                                                                          • +1
                                                                                                            У кого старый логотип и никаких шариков, можете посмотреть эту красоту на YouTube: http://www.youtube.com/watch?v=mf_X9zoZEn4
                                                                                                            • 0
                                                                                                              Ещё пару дней назад был логотип с молекулой фуллерена вместо буквы О. И можно было её крутить
                                                                                                              • +2
                                                                                                                radio.momoiro.ru/ballz.html
                                                                                                                Больше шариков, персиковых и круглых!
                                                                                                                Можно невозбранно забирать код и вернуть туда поддержку IE.
                                                                                                                • 0
                                                                                                                  Немного де-обфусцировал скрипт.
                                                                                                                  • 0
                                                                                                                    Во! работает в Epiphany! А то Гугл такой Гугл…
                                                                                                                    • +1
                                                                                                                      На моем слабеньком компе в Chrome 6.0.472.53 шарики тормозят, в Opera все отлично, нагрузка на проц не больше 80%.
                                                                                                                    • 0
                                                                                                                      Не уверен зачем мне прорекламировали хром и сафари. Сейчас просто запустил фаерфокс и увидел странные шарики. Оказалось это в честь топика на хабрахабре о великих хроме и сафари.
                                                                                                                      • 0
                                                                                                                        Не делайте поспешных выводов.
                                                                                                                        Я проверил эффект во всех браузерах, прежде чем написать топик. И в тот момент, когда я проверял, в моём основном браузере (FF 3.6.8) эффекта не было, а в Safari и Chrome — был.
                                                                                                                      • +2
                                                                                                                        Демонстрация возможностей HTML5 — детские шарики по всему экрану. 10 лет, между прочим, ждали.
                                                                                                                        • –2
                                                                                                                          Гугл становится неудобным: эти летающие шарики ощутимо нагрузили мне процессор. Я считаю плохим ходом приделывать подобные бесполезные свистоперделки в ущерб производительности и скорости.
                                                                                                                          • –2
                                                                                                                            А в найтли билде лисы — так ещё и скроллбары появляются, при сильном разлетании шариков.
                                                                                                                          • –1
                                                                                                                            Народ, сколько можно дрочить на HTML5 и canvas? Не понимаю, что за прелесть в технологии, грузящая самые современные процессоры чуть не на половину просто при просмотре видео, который сделан на ней? Технология, которая никогда не добъется такого же функционала, что Flash, гораздо кстати менее требовательный к ресурсам? На хабре на каждой второй странице мелькают статьи «10 новых нахер никому не нужных фишек, сделанных на HTML5, которые удивят вас и загрузят ваш комп по самое не могу». Ну объясните, что в этом такого клевого?
                                                                                                                            • 0
                                                                                                                              вы так говорите «никогда не добъется», словно флэш был дарован нам Богом на горе Синай.

                                                                                                                              у меня каждый раз на Маке включается вентилятор, когда я смотрю видео во флэше. и что?

                                                                                                                              люди работающие в разных компаниях по всему миру тратят своё время, чтобы оптимизировать встроенные в браузеры механизмы рендеринга и исполнения JS (который осмелюсь напомнить вам лет 10 назад сам по себе неплохо тормозил, а сейчас его в серверных приложениях используют).
                                                                                                                            • 0
                                                                                                                              pastie.org/1143211 — исходник шариков. зависит от prototype.js
                                                                                                                            • 0
                                                                                                                              Firefox 3.6.3, XP PRO SP3 На google.ru все работает!
                                                                                                                              • 0
                                                                                                                                Несколько дней назад, под хромом, в центре гугол логотипа наблюдался трехмерный сферический каркас (на тему фулеронов) который можно было повертеть вокруг различных осей — зависело от движения мыши. Под мозила файрфокс эффект не работал.

                                                                                                                                дизайнеры+програмисты гугол лого достойны респекта и уважухи за вот такие псевдо пасхальные йайца — они задают стиль, они делают работу с браузером более диалоговой, комфортной и уютной (всего понемногу).

                                                                                                                                Однако с шарами несомненно перебор — очень отвлекает.
                                                                                                                                • +1
                                                                                                                                  «4 P.S Прошу прощения у минусовавших меня фанатов FF за то, что изначально написал только Chrome и Safari. У меня у самого основной браузер FF, но там эффект почему-то не работал, сейчас — работает. „

                                                                                                                                  Да пусть они сгорят все в своём фаерфоксе вместе с вашим рейтингом, чо прощения просить? Люди, что с вами делает эта сраная кармасистема? Вы в жизни такие же становитесь, или только тут? Какой же идиотский искуственный извращённый механизм вы тут развели, ТМ! я понимаю конечно, что не первый (милионный), кто это говорит, но это постоянно отвлекает от содержания и смысла и невольно обращаешь внимание.
                                                                                                                                  • +1
                                                                                                                                    О чем все говорят? Какая демонстрация HTML5? Просто Google, как обычно, 7 сентября празднует мой свой день рождения! С днем рождения, Google!
                                                                                                                                    googlesystem.blogspot.com/2010/09/googles-particles-doodle.html
                                                                                                                                    • +2
                                                                                                                                      с днем рождения, %username%!
                                                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                                      • 0
                                                                                                                                        В глазах рябит
                                                                                                                                        • 0
                                                                                                                                          супер эффект. правда, если бы мне не рассказали утром о нем, даже бы и не заметил, у меня по дефолту обои стоят в поисковике.
                                                                                                                                          • 0
                                                                                                                                            кстати, сделал видео capture с демонстрацией работы, если кому-то нужно, могу поделиться.
                                                                                                                                          • 0
                                                                                                                                            и что же демонстрируется теперь картинкой www.google.ru/logos/keystroke10-hp.png?
                                                                                                                                            • 0
                                                                                                                                              вот поэтому хорошо, что есть видео ;)
                                                                                                                                              • 0
                                                                                                                                                ну картинка-то тоже интерактивная:
                                                                                                                                                • +1
                                                                                                                                                  Ребята в гугле походу решили устроить на главной js playground =)
                                                                                                                                                  • 0
                                                                                                                                                    а что, удобно, столько бета-тестеров сразу)
                                                                                                                                                  • 0
                                                                                                                                                    о! а мне как-то даже не пришло в голову чтото искать :)
                                                                                                                                                    • 0
                                                                                                                                                      пока не воспользуешься поиском, не поймешь :)
                                                                                                                                                      • 0
                                                                                                                                                        Очень хочется теперь услышать людей, которые будут говорить, что и такой логотип не под силу опере…
                                                                                                                                                    • 0
                                                                                                                                                      Пузырикиии!

                                                                                                                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.