Home > Web | 技術 > Googleのロゴがニュートンになってた。そしてリンゴが落ちてきた

Googleのロゴがニュートンになってた。そしてリンゴが落ちてきた

2010-01-04 (月)
Web | 技術

普段Googleトップをあんまり活用していないのでわからなかったですが、わっきーさんに教えてもらいました。

んで、コード見てたらロゴのimgタグのonloadにリンゴを落とすJavaScriptが書かれててちょっと面白かった。
imgのonload使うときって、あとから読み込んだ画像のwidth・heightを取得するときに使ったりするんですが、こうゆうトリッキーな使い方は面白いですね。

ざっくりですが、コードを抜き出してみたのが以下。

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>アイザック ニュートンの誕生日</title>
	<script type="text/javascript" charset="utf-8">
	var google = {};	// rein用

window.fail = function() {
		window.lol && lol();

setTimeout(function() {
			var h = 0,
			v = 1,
			f = document.getElementById('fall'),
			i = setInterval(function() {
				if (f) {
					var r = parseInt(f.style.right) + h,
					b = parseInt(f.style.bottom) - v;
					f.style.right = r + 'px';
					f.style.bottom = b + 'px';
					if (b > -210) {
						v += 2
					} else {
						h = (v > 9) ? v * 0.1: 0;
						v *= (v > 9) ? -0.3: 0
					}
				}
			}, 25);

google.rein && google.rein.push(function() {
				clearInterval(i);
				h = 0;
				v = 1
			})
		}, 2000)
	}
	</script>
</head>
<body>　　　　　　　　　　
	<img src="tree.jpg" onload="fail();">
	<img src="apple.png" style="position: relative; right:248px; bottom: 46px;" id="fall">
</body>
</html>

1個分からないのが、アニメーションのclearIntervalをgoogle.reinにpushしているんですが、
これをいったいどこで実行しているんだろう。。。

Googleトップのコードを一通りおってみたんですが、実行してそうな箇所がない。
1つだけあやしい箇所があったんですが、9zPpGAOKyhU.jsの中の以下の部分。（だいぶ端折ってます）

iにはpushという文字が入っているだけで、pushされた分をループしているわけではない。。。

仕方ないので、以下のグリモンでテスト。
タイミングがもしかしたら微妙かもしれないが、リンゴが落ちたあとにclearIntervalされるはずだからonloadでもOKでしょう！

google.rein実行された？グリモン

じっ、実行されない。。。

Firebugのprofileで調査

リンゴが落ちたあとにprofileを開始して、適当なタイミングで止めてみたのが以下の画像。

「undefine()」の部分が、該当のアニメーション処理。
中身を見ると、

とアニメーションのクロージャが入っているので、間違いないでしょう！
profileEndのタイミングをずらせばもっと回数の部分が増えていきます。

結局、よくわからなかったんですが、実行してないでしょ？w
いや〜分からんな〜〜〜。

グーグルのロゴデザインやってる人に
乱歩のやつは最高だったと伝えておいてください

喜ぶと思います。彼はdoodle 作るのにたくさんの資料や本を読んだり、頭があつあつになるくらい考えてますから。
でも手塚治虫先生の時や藤子先生の時など漫画がたくさんおいてあるので遊んでるみたいです。

via: グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

[via]
グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

Newer: eclipseの起動画面を変えて楽しむ方法
Older: Viva 2010!! Happy New Year JavaScripters

Comments:0

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1234
Listed below are links to weblogs that reference: Googleのロゴがニュートンになってた。そしてリンゴが落ちてきた from HouseTect, JavaScript Blog

Home > Web | 技術 > Googleのロゴがニュートンになってた。そしてリンゴが落ちてきた

RSS Feeds

Search

Recent Entries

このブログについて

author：hisasann.com

description：就職しました！
最近はJavaScript、Perl、Rails、Java（Struts+Spring+iBatis）なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい！

他に運営しているブログ：

利用しているWebサービス :

Tag cloud

カテゴリー

月別アーカイブ

jQuery Meetup

Visit jQuery Meetups

Page Top