You can zip open Google's homepage today. | Hacker News Reader

You can zip open Google's homepage today.

google.com.au

123 pointscapex29 comments

A simple summary of what I think is going on here:

There is a bit of slight of hand here that makes this look like a CSS3 animation but I'm pretty sure it's not.

Upon initial page load there is a canvas that takes up the background that has the zipper, logo, split input's and buttons on it. On top of that they have real DOM input and buttons.

When you touch the zipper they hide the DOM elements and reveal the underlying canvas. The background page is loaded and the canvas animation proceeds and reveals the background page.

I believe this is all the code for it: https://gist.github.com/2476246. Line 343 (the $ function declaration) initialized the script and line 363 initialized the canvas element. You're right, not CSS3.

The two image sprites are http://www.google.com.au/logos/2012/sundback12-hp-l.jpg and http://www.google.com.au/logos/2012/sundback12-hp-s.png.

But when i checked in Firebug i am only able to see the following img (top half) https://www.google.com/logos/2012/sundback12-hp.jpg

At some point they hide the image and create the canvas. If you right-click the zipper and click inspect, it selects the canvas for me right away.

> When you touch the zipper

Actually, you can start dragging anywhere on the logo and it will still unzip.

you should patent that...

My favorite is still the Les Paul doodle (http://www.google.com/logos/2011/lespaul.html), closely followed by the Jules Verne doodle (http://www.google.com/logos/verne.html).

The interactive Sanislaw Lem doodle (http://www.google.com/logos/lem/) is up there as well.

I'm just seeing this for the first time. I wonder how this doodle affected people's productivity. And considering the height, where was the search field placed?

A nice little artistic touch: If you go straight down from the beginning of the Jules Verne logo, there's a bunch of corals which fill the Google porthole perfectly.

Martha Graham http://www.google.com/doodles/martha-grahams-117th-birthday

My personal favourite would be pacman! http://www.google.com.au/pacman/

It looks like a neat feat, but it is not really interactive, I think. When I pull it somewhat down and then all the way up again, all while keeping mouse1 pressed, it will still unzip.

It zips up and down following the mouse as one would expect for me.

What Browser are you on? I tried FF12. For me, once I clicked the thing, not matter what I do, it will unzip, even if pulled up all the way again.

I was on Chrome and never tried with Fx.

Doesn't work in Chrome Beta for ICS. That's a shame, because this doodle screams for touch interaction.

Great, now i can't zip it back.

I got my ... pointer stuck in the zipper.

I would love to read something about how this works.

Two observations.

Doesn't do anything on an iOS device.

I would never have navigated to the Google homepage if it wasn't linked here.

Read on Twitter: something is wrong if you have to search after you unzip!

This may be my favorite Google doodle so far.

Amazing.

Not sure how I feel about Google asking me to take its pants off.

Hacker News has been a little bit reddish lately. I don't really like it.

I thought "Sticky Fingers" by the Rolling Stones. But then, it's missing Mick's stuff[1].

[1] Ok, not really him, now that I read who's on the cover, but when I saw it at someone's place, I thought it must be Mick's.

I too found it slightly disturbing—they could make zipper horizontal, for example. Some googlers probably had a good laugh. =)

Its not asking you. It just stands there with it's zipper in your face. "You know what to do" :{

Reply on news.ycombinator.com