Are the Google Dots HTML5?

53 views
Skip to first unread message

Mike

unread,
Sep 7, 2010, 4:05:48 PM9/7/10
to Chromium HTML5
I keep reading people saying that today's Google doodle of the
interactive dots is html5. I don't know html5, but expect I will
learn it some day. I have read some general overviews of what it is
supposed to do, but I suspect I am under-informed.

Can someone tell me if they know for sure that the Google Dots are
done with html5? If you know this to be true, can you please tell me
what is being done that could not be done before html5, and what new
html5 css3 elements are being used to do it.

My limited knowledge of html/javascript tells me that, contrary to all
the hype, there is nothing special going on on Google today, just some
divs being moved around with javascript. I know this has been done a
million times over in every variation with flash. But, hasn't this
been possible with html/javascript for years, and just not done
because it is annoying + processor intensive (the same problem people
have flash).

-Please inform me! :)
-Mike

Paul Irish

unread,
Sep 7, 2010, 6:03:58 PM9/7/10
to Chromium HTML5
The animation is being done with divs and javascript animation, yup.
Not really anything new to HTML5.

As reported here: http://techcrunch.com/2010/09/07/google-logo/ ..
+ If you move the browser window around, the balls also move. These
movements are based on the direction you move the window.
+ If you have a custom background installed on your Google homepage,
you’ll see a blue-red-yellow-green grid of dots next to the Google
logo, clicking on this will take you to the regular white Google
homepage where you’ll see the dots in action.
+ When you click back to the Google.com after being away, the dots
recognize that.


However some developers have created html5-y versions:
canvas: http://rawkes.com/experiments/google-bouncing-balls-canvas/
svg: http://berjon.com/blog/2010/09/bouncy.xhtml

Both are super cool. I'm not sure but I imagine the div + js-based
animation approach was taken in order to get IE compatibility, which
won't support canvas or SVG until IE9.

The reason its so good looking is because browsers are much faster
than they used to be. This exact animation is totally possible in IE6,
it just wont be very smooth and lively.

Rick Waldron

unread,
Sep 7, 2010, 4:46:07 PM9/7/10
to Chromium HTML5
Nope, not at all - It's just div's being moved around with javascript. If you open google.com, then open the javascript console to the "elements" tab (if using Firefox with Firebug, open the HTML tab) and traverse down to:

html > body > span#main > center > span-#body > center > div#lga > div#hplogo > *

You'll see a whole mess of divs with class="particle circle"... browsing the minified javascript comes up with several refs to "particle" and "circle" http://gist.github.com/569063

Still really neat.



--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.


Mohamed Mansour

unread,
Sep 7, 2010, 4:12:16 PM9/7/10
to Mike, Chromium HTML5
I have checked the source code, and they are using a bunch of <divs> that move. That doodle works in IE8 too.  I assume they are not using any HTML5 features, just normal JavaScript DOM manipulation. 

There is a high probability I might be wrong :)

-
Mohamed Mansour


On Tue, Sep 7, 2010 at 4:05 PM, Mike <mike...@gmail.com> wrote:

Adam Shannon

unread,
Sep 7, 2010, 5:02:34 PM9/7/10
to Mike, Chromium HTML5
I haven't looked at the code, but from what I've read it's actually a
lot of div elements that are flying across the screen.

> --
> You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
> To post to this group, send email to chromiu...@chromium.org.
> To unsubscribe from this group, send email to chromium-html...@chromium.org.
> For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.
>
>

--
Adam Shannon
 Web Developer
 http://ashannon.us

Paul Irish

unread,
Sep 9, 2010, 11:50:19 AM9/9/10
to Chromium HTML5

Mohamed Mansour

unread,
Sep 9, 2010, 11:52:30 AM9/9/10
to Paul Irish, Chromium HTML5
lol, nice find Paul :)

-
Mohamed Mansour
m...@chromium.org


On Thu, Sep 9, 2010 at 11:50 AM, Paul Irish <paul...@google.com> wrote:
Hahah..

http://www.aregooglesbouncingballshtml5.com

iandevlin

unread,
Sep 9, 2010, 5:21:49 PM9/9/10
to Chromium HTML5
Glad you liked it :-)

On Sep 9, 4:50 pm, Paul Irish <paulir...@google.com> wrote:
> Hahah..
>
> http://www.aregooglesbouncingballshtml5.com
Reply all
Reply to author
Forward
0 new messages