jQuery rolodexスタイルのクロックフリップアニメーションをコーディングしますか？

Question

私はフリップダウン番号を持つ古い時計に基づいて簡単なアニメーションを構築するのに苦労しています。私は、すべてのHTML/CSS/JavaScriptのでjQueryのを使用して「フリッピング」のアニメーションを構築しているに実行している最大の問題

：私はプレミアムピクセルで見つかった景品PSDからコピーの下に画像を追加しました。私が見つけた唯一のチュートリアルは、実際に画像を使用するfrom this net tuts+ articleです。時計の上半分と下半分を2つの異なる画像セットに分割し、1秒ごとにそれらを置き換えます。

このメソッドは、読者に実際のコンテキストを提供しないため、ウェブサイトで現実的ではありません。私は数字をハードコードして、jQueryだけを使って反転アニメーションを実行することを望んでいます - バックグラウンドティッカーボックス以外の画像は好ましくはありません。別の言い方をすると、の数字はHTMLにコード化されていますが、クロック自体は一連のrolodexスタイルのbg画像です。

私はこれを十分に説明してくれることを願っています。私は数日間このことに苦労していました。正直なところ、このスクリプトにどのようにアプローチするか分かりません。おそらく、上半分と下半分を別々のdivに分割し、通過する秒ごとに内部番号を変更しますか？私はjQueryでかなり好調ですが、私はアニメーションに弱いです。

ご協力いただきありがとうございます！

Answer 1

私は、上と下にテキストが重複している場所で何かをしようとしていると思います。次に、画像とCSSを使用して、各半分だけを適切に表示します。

次のステップは、テキストが画像で反転しているという錯覚を作り出すことです。どのようにしてそれをしたいのか分かりません。私はサイジングとスピードの問題だと思う。イメージに関連するテキストのサイジングと、イメージが下から上にフリップする速度。

アニメーションの最後の部分では、上半分が次の番号で準備完了し、下半分が完成時にキューアップします。

実際のコードはありませんが、私はこのコンセプトがうまくいくことを願っています。

Answer 2

jQuery image rotateテクニックを試してください。