7

しばらく前に粒子爆発以来、Googleがロゴをどのようにアニメーション化するかを理解しようとしてきましたが、今日、ロベルトブンゼンの200周年を祝うために化学が設定されています。

これはHTML5（Firefox 4、Chrome、Safari 5を使用しています）だと思いますが、誰かがそうするかどうか、そしてこれらのタイプのアニメーションを実行する方法についての良いチュートリアルがあるかどうかを確認できますか？

4

1 に答える 1

5

これは部分的に HTML5 です:

  1. 彼らはクロスブラウザのスプライト技術を使用しています - 複数のシーンを持つ1つのPNG画像。

1シーンの領域を切り出して表示します。次のシーンを表示するには、クリッピング領域の開始オフセットをシフトするだけです。

Firebug で確認してください: 画像は div タグの背景として 1 つのシーンの正確な高さで設定され、Y オフセットと背景の「移動」をシフトします - フィルム テープのように :)

これがスニペットです (Google (C))。-380px と -570px に注目してください:

 <div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
 no-repeat scroll 0pt 
-380px transparent; height: 190px; opacity: 0.3;
 position: absolute; width: 465px; z-index: 20;"></div>

 <div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
 no-repeat scroll 0pt
-570px transparent; height: 190px; opacity: 0.3;
 position: absolute; width: 465px; z-index: 20;"></div>

ここにスタックからの良い DIY の例があります: How to show animation image from PNG image using javascript? [Gmail のように]

更新: 2. また、HTML5 キャンバスを使用して、インタラクティブな効果 (泡など) を含むアニメーションの一部を生成します。

于 2011-03-31T06:38:39.917 に答える