6

数字が下がっている古い時計をベースにした簡単なアニメーションを作成するのに苦労しています。プレミアムピクセルで見つかった景品のPSDからコピーした以下の画像を追加しました。

パタパタ時計PSD

私が直面している最大の問題は、すべてHTML / CSS/JavaScriptでjQueryを使用して「反転」アニメーションを作成することです。私が見つけた唯一のチュートリアルは、実際に画像を使用するこのnettuts+の記事からのものです。時計の上半分と下半分を2つの異なる画像セットに分割し、通過する1秒ごとにそれらを置き換えます...

この方法は、読者に実際のコンテキストを提供しないため、Webサイトでは現実的ではありません。数値をHTMLにハードコードし、jQueryのみを使用してフリッピングアニメーションを実行することをお勧めします。できれば、背景のティッカーボックス以外の画像は使用しないでください。言い換えれば、数字はHTMLにコード化されていますが、時計自体は一連のローロデックススタイルのbg画像です。

私はこれを十分に説明したことを願っています。私はこれに数日間苦労していて、正直に言ってこのスクリプトにアプローチする方法がわかりません。たぶん、上半分と下半分を異なるdivに分割してから、通過する1秒ごとの内部数値を変更しますか？私はjQueryはかなり得意ですが、アニメーションは苦手です。

よろしくお願いします！

4

1 に答える 1

0

テキストが上下に重なっているようなことをしようと思います。次に、画像とcssを使用して、各半分のみを適切に表示します。

次のステップは、テキストが画像と反転しているような錯覚を作り出すことです。どうやってやりたいのかわかりません。サイズとスピードの問題だと思います。画像に関連するテキストのサイズと、画像が上から下に反転する速度。

アニメーションの最後の部分は、上半分を次の番号で準備し、下半分を完了時にキューに入れることです。

役立つ実際のコードはありませんが、この概念がうまくいくことを願っています。

于 2012-04-11T18:05:57.420 に答える