Пользователь
0,0
рейтинг
7 сентября 2010 в 11:45

Демонстрация возможностей 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 !)
Иван @coolspot
карма
59,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (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
    На самом деле в любом браузере работает, только в ослике попроще выглядит.
    • 0
      Ошибся. В Опере действительно нет шариков.
    • +10
      там квадратики?
      • 0
        кубики
      • +61
        квадратики — это в других браузерах:

        image
        • 0
          Интересная картинка. Ссылкой не поделитесь?
        • 0
          Там, в ие, все на самом деле куда печальнее:
        • +1
          Интересно проследить эволюцию по Firefox:

          CSS-Cat in Firefox
  • +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!
      • 0
        Dropbox не ok
  • –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
                        6.0.472.53
                      • 0
                        В 7.0.503.0 на Маке то же самое: d.myfreeweb.ru/1Gg47C
                      • 0
                        сафари 5 на маке, то же самое
                      • 0
                        FF 3.6.3 на маке то же самое
                      • 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
      Не вы, случайно, всем отделом правительственные сайты делаете?
      • +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
      Добавил видео.
  • 0
    и что же демонстрируется теперь картинкой www.google.ru/logos/keystroke10-hp.png?
    • 0
      вот поэтому хорошо, что есть видео ;)
    • 0
      ну картинка-то тоже интерактивная:
      • +1
        Ребята в гугле походу решили устроить на главной js playground =)
        • 0
          а что, удобно, столько бета-тестеров сразу)
      • 0
        о! а мне как-то даже не пришло в голову чтото искать :)
      • 0
        пока не воспользуешься поиском, не поймешь :)
      • 0
        Очень хочется теперь услышать людей, которые будут говорить, что и такой логотип не под силу опере…
  • 0
    Пузырикиии!

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