Google Interactive DoodlesforOlympicsがどのように機能するか知っている人はいますか。 http://www.google.com/doodles/soccer-2012
Divはhplogoであり、スタイルはそのすぐ上にあります。たとえば、次のようになります。
#hplogo{background:url(/logos/2012/soccer12-hp.png)....
スコアの計算方法がわかりません。オブジェクトの移動方法など。読み取り可能なJSファイルですか。前もって感謝します。
心から、仲間の開発者
デバッガーでページのソースコードを表示する方法を知っていますか？Google Chromeで、を押すだけF12です。デバッガーを開くと、ファイルが表示されます。JavaScriptファイルに気付くでしょう。クリーンアップすることで読みやすくすることができますが、変数名は圧縮されます。
Doodle の中には、アニメーションを表示するために Canvas を使用するものがあります。読み込まれた画像から取得されたさまざまなフレームは、javascript のタイマーを使用して描画されます。
CSS プロパティを使用するものもありますbackground-image。JavaScript タイマーを使用してCSS プロパティbackground-positionを変更し、アニメーションを作成します。
アニメーションはより多くの JavaScript を使用してインタラクティブになります。
例: http://www.google.com/logos/2012/hurdles12-hp-sprite.png、 http://www.google.com/logos/2012/basketball12-hp-anim.png
