HN Explorer

37 comments

[ 2.3 ms ] story [ 29.5 ms ] thread
artursapek
I would love to read something about how this works.
travisglines
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.

AdamTReineke
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.

goblin89
> When you touch the zipper

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

therealarmen
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).
mutagen
The interactive Sanislaw Lem doodle (http://www.google.com/logos/lem/) is up there as well.
namzo
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?
pja
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.
replax
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.
abraham
It zips up and down following the mouse as one would expect for me.
replax
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.
abraham
I was on Chrome and never tried with Fx.
ElbertF
Not sure how I feel about Google asking me to take its pants off.
pablasso
Hacker News has been a little bit reddish lately. I don't really like it.
mc32
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.

goblin89
I too found it slightly disturbing—they could make zipper horizontal, for example. Some googlers probably had a good laugh. =)
malux85
Its not asking you. It just stands there with it's zipper in your face. "You know what to do" :{
panacea
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.

[dead] sceptre
flush the device down the toilet
joshfraser
This may be my favorite Google doodle so far.
[deleted]
(comment deleted)
beerglass
Read on Twitter: something is wrong if you have to search after you unzip!
zerostar07
Great, now i can't zip it back.
read_wharf
I got my ... pointer stuck in the zipper.
padobson
Doesn't work in Chrome Beta for ICS. That's a shame, because this doodle screams for touch interaction.
[dead] vipvoy
<a href="http://public.fotki.com/megastorm/video710192/dsc_330.html&#... Stratus Humiliated</a>

<a href="http://broadbandsports.com/user/22329/profile>; Eva Longoria flashes David Letterman =) with her "avocados"</a>

<a href="http://www.metacafe.com/channels/keeperoftheblackgate/>J... Aniston Makes Grown Men Stutter!!!</a>

<a href="http://www.metacafe.com/watch/2048423/monica_bellucci_in_irr... Anderson Strips Tease On The Ellen Degeneres Show</a> <a href="http://zone.aimoo.com/Profile/vipvoy>real sex videos</a>

<a href="http://profiles.lazygirls.info/lorealparis>Britney Spears Groped by a Dancer</a> <a href="http://athleticmeet.com/search/member_profile.cfm?u=hourglas... Spears Groped by a Dancer</a> <a href="http://vipvoy.zoints.com>Brothers Wife Didnt Know That Im In The House</a> <a href="http://myspace.com/dnthll>Young Neighbour Wife Seduces Older Man</a> <a href="http://acidcow.com/user/vipvoy>Black Dick Slammed Tattooed Milf Boss Ass</a> <a href="http://nce.socialgo.com/members/profile/5/joeali54>Wife In Sexy Lingerie Teases Her Hubby</a> <a href="http://bios.weddingbee.com/profile/competitors>Boy Seduced by Friends Mom</a> <a href="http://dailybooth.com/johnpet/22532521>Ninja VS Karate</a> <a href="http://sports.webshots.com/photo/2950806600046019034oRUYud&#... Death 3 Part I</a> <a href="http://xxx.vipvoy.com>Free Booty Sex</a> <a href="http://nastydollars.vipvoy.com>Adult Movie Chat</a> <a href="http://genbucks.vipvoy.com>Enhancement Herbal Capsules</a> <a href="http://www.thoughts.com/WzdqbGGXo_Q>Volleyball Butt 4</a> <a href="http://vipvoy.com/error404.php>Winthrop Volleyball Team Dance 1</a> <a href="http://milfedup.blogspot.com>Lingerie Basketball League</a> <a href="http://vipvoy.com/assparade.html>Professional Volleyball Player Ivana Djerisilo</a>

[dead] vipvoy
<a href="http://cams.com/go/g745229-pct><img src=http://cams. <a href="http://www.camcrush.com/main.htm?id=myrner2><img src=http://www.camcrush. <a href="http://www.webcams.com/link.php?reseller=vipvoy&rev=0... src=http://www.webcams. <a href="http://mt.livecamfun.com/xtarc/579755/354/0/arg_tour=ex1?mta... src=http://mt.livecamfun. <a href="http://www.webcams.com/link.php?reseller=vipvoy&rev=0... src=http://www.webcams. <a href="http://www.webcams.com/affiliate/wca_promo.php?action=online... src=http://www.webcams. <a href="http://www.webcams.com/affiliate/?ref=vipvoy><img src= <a href="http://live-cams-1.livejasmin.com/landing/?tid=103&psid=... src= <a href="http://chaturbate.com/affiliates/in/ZmU7/Yi4t2/?track=defaul... src=http://chaturbate. <a href="http://www.adultdatelink.com/?affliateid=125356XGUCMM&pr... src=http://www.adultdatelink. <a href="http://adultfriendfinder.com/go/g1035><img src=http://adultfriendfinder <a href="http://www.fling.com/enter.php?prg=2&t=1&id=myrner2&... src=http://www.fling. <a href="http://www.momsanaladventure.com/t1/revs=vipvoy/><im... src=http://www.momsanaladventure. <a href="http://www.bangbrosnetwork.com/t1/revs=vipvoy/><img src=http://www.bangbrosnetwork. <a href="http://www.ballhoneys.com/t1/revs=vipvoy><img src=http://www.ballhoneys. <a href="http:/...
[dead] vipvoy
<a href="http://www.plurk.com/seethrudresses><img src=http://www.plurk. <a href="http://fiverr.com/vipvoy><img src=http://fiverr. <a href="http://disqus.com/aquafanfan><img src=http://disqus. <a href="http://www.myyearbook.com/tomali81><img src=http://www.myyearbook. <a href="http://www.myyearbook.com/vipvoy><img src=http://www.myyearbook. <a href="http://www.jamendo.com/en/user/jloslutdress><img src=http://www.jamendo. <a href="http://www.codeproject.com/Members/_RSjQQqYF3w><img src=http://www. <a href="http://www.divshare.com/download/4156650-c32><img src=http://www.divshare. <a href="http://bodyspace.bodybuilding.com/jdm022/><img src=http://assets.bodybuilding. <a href="http://rude.com/breakthough10><img src=http://rude. <a href="http://www.galaxy.com/adult_services/usa/6731.html><... src=http://www.galaxy. <a href="http://www.galaxy.com/women_seeking_men/usa/6730.html>&#... src=http://www.galaxy. <a href="http://fubar.com/6346860><img src=http://fubar. <a href="http://vipvoyeurthongs.com/fitness-lesbo-secret-virgin.html&... src=http://vipvoyeurthongs. <a href="http://hartleyvball.mysbrforum.com/><img src=http://mysbrforum. <a href="http://us.ebid.net/users/vipvoy><img src=http://ebid.net <a href="http://www.redtube.com/dieselboy3004><img src=http://www.redtube. <a href="http://vipvoy.com/dita-1.html><img src=http://vipvoy. <a href="http://www.shooshtime.com/embark08/><img src=http://www.shooshtime.