0

アニメーションのあるサイトの特定の部分までスクロールするとすぐに、多くのサイトに自動読み込みアニメーションがあることがわかります.apple.comにはそれがあり、最近ではhttp://www.bugherd.com/で見つけました特徴

Web インスペクタに多数の PNG が読み込まれているのが見えますが、どのように処理されているのかわかりません。

4

3 に答える 3

1

余談ですが、Apple のサイトのアニメーションはかなり複雑ですが、その効果を実現するために使用されるテクニックのかなり詳細な概要があります。ただし、BugHerd で行っていることをはるかに超えています :)

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

于 2013-05-30T00:44:42.110 に答える
1

Matt (BugHerd の共同創設者兼デザイナー) です :)

機能ページにまとめたアニメーションを気に入っていただき、本当にうれしく思います。この効果を得るために、transit.js ライブラリを使用しました: http://ricostacruz.com/jquery.transit/

jQuery アニメーションと同じ構文を使用し、アニメーション キューも使用します。必要なすべての画像をロードし、必要に応じて遷移、非表示、および表示することで、アニメーションをまとめました。

これを自分のサイトに実装する方法について、他に質問があれば喜んでお答えします。

乾杯！

于 2013-05-30T00:30:33.150 に答える
0

何を言っているのかわからないが、Apple が iPad を発表したときのアニメーションについて言及しているなら、それは簡単だ。あなたがすることは、イベントリスナーをページ/コンテナのスクロールイベントにバインドすることです。次に、上部のオフセットをスクロールの高さと比較して、要素がビュー範囲内にあるかどうかを確認します。表示されている場合は、関数を呼び出して要素をアニメーション化します。これは、background-offset をアニメーション化する単一の画像スプライト、または実際の画像シーケンス、さらにはキャンバス (呼び出し) によって実行できます。

于 2013-05-01T13:42:47.873 に答える