Google がこのGideon Sandback Doodleに使用した可能性のある Web テクノロジー(ビデオを参照)
http://www.youtube.com/watch?v=utijBRRmAJo&feature=relmfu
私は本当に興味があります。Webブラウザで、本当にこれだけのことができるでしょうか? フラッシュではないと思いますが、そうでなければ不思議ではありません。ソースコードまたは同様のサンプルはありますか?
これは、現在 Web テクノロジーをどれだけ拡張できるかを示していると思います。
Canvas 要素<canvas>が使用されます。Firefox、Chrome、Opera など、最新のブラウザはすべて HTML5 をサポートしています。はい、今日のブラウザでこれらを行うことは可能です!
ジッパーの歯は、png スプライト ファイルからキャンバスに描画されます。ジッパー スライダーもその png 画像に存在します。インタラクティブなアニメーション全体は Javascript でコーディングされています。ジッパー ピール エフェクトは、コンテキスト オブジェクトの arc() メソッドを使用して実行されます。この場合、コンテキストは 2 次元です。
スライダーをクリックするとすぐに、すべての Dom 要素 (ボタンとテキスト入力) が非表示になり、キャンバスの描画だけが表示されます。使用されている JavaScript コードを使用しているため、ローカルの html ファイルに対する効果を単独で再現することはできません。いくつかの外部ライブラリが使用されていると思います。google.listen() メソッドが定義されていないため、どのように機能するかわかりません。jsbeautifier.org を使用して、美化された JavaScript コードであるこのスレッドの JavaScript を確認してください 。