javascript - 今日のグーグルドゥーグル万国博覧会はどのように実施されていますか？

Question

HTML5とjqueryのパワーを使用しているのか知りたいのですが、これについてどのサンプル例を入手できますか？

Answer 1

コードを調べると、Doodle が複数の画像で構成されていることが実際にわかります。

• http://www.google.com/logos/2011/worldsfair11-hp-1.gif
• http://www.google.com/logos/2011/worldsfair11-hp-2.gif
• http://www.google.com/logos/2011/worldsfair11-hp-3.gif
• http://www.google.com/logos/2011/worldsfair11-hp-4.gif
• http://www.google.com/logos/2011/worldsfair11-hr.jpg - 実際の静的な Doogle
• http://www.google.com/logos/2011/worldsfair11-hp.png

美しいJavaScriptはこちら: http://pastebin.com/r8s9H2jA

JavaScript を使用してルーペを作成し、CSS / JavaScript の組み合わせを使用してアニメーション要素を適切な位置に配置するようです。

要するに：

• HTML5: JavaScript と CSS を組み合わせたものです。これ自体は、HTML5 仕様に限定されないため、 .
• jQuery:いいえ。

Answer 2

私はそれを調べました、そしてそれはこのような「レンズズーム」効果と同じくらい簡単です：http : //www.dailycoding.com/Uploads/2011/03/imageLens/demo.html大きな画像とその上にいくつかのアニメーションGIFがありますアニメーション用:)

Answer 3

いいえ、私が知る限り、HTML5またはjQueryの新機能は使用していません（ルーペを表示するときに使用しているスケール遷移を数えない限り）。グーグルがjQueryと同じくらい大きなものを彼らのフロントページに置くだろうと私は真剣に疑っています...

基本的に落書きのコピーを3つ作成し、それらから次のような丸みを帯びた長方形を作成することで、丸い「イメージマスク」効果を実現します（ASCIIアートゴー）

__|¯¯¯¯|__
|        |
|        |
|__    __|
  |____|

次に、これをルーペ画像でオーバーレイします。その太い境界線により、落書き画像の円形部分が表示されているように見えます。