编码jQuery rolodex风格的时钟翻转动画？

Question

我正在努力构建一个基于那些带有翻转数字的旧时钟的简单动画。我添加了一张从Premium Pixels上发现的免费赠品PSD复制的图片：

我遇到的最大问题是使用jQuery all in HTML / CSS / JavaScript 构建“翻转”动画。我发现的唯一教程是from this net tuts+ article实际使用图像。它将时钟的上半部分和下半部分分成两个不同的图像集，并替换它们每过一次......

这种方法在网站上是不现实的，因为它没有为读者提供实际的上下文。我更喜欢将数字硬编码为HTML并仅通过jQuery执行翻转动画 - 最好除了背景自动收录盒之外没有图像。或者换句话说，数字被编码为HTML，但时钟本身就是一系列rolodex风格的bg图像。

我希望我已经很好地解释了这一点。我已经在这方面苦苦挣扎了几天，老实说我不知道​​如何处理这个脚本。也许通过将上半部分和下半部分分成不同的div，然后更改每秒通过的内部数字？我在jQuery中相当富裕，但我在动画上很弱。

提前感谢您的支持！

Answer 1

我想我会尝试做一些文本在顶部和底部重复的内容。然后使用图像和CSS仅适当地显示每一半。

下一步是创造文本与图像一起翻转的错觉。我不确定你想怎么做。我认为这是一个尺寸和速度的问题。与图像相关的文本大小以及从底部翻转的速度。

动画的最后一部分是上半部分准备好下一个数字，下半部分完成后排队。

我没有任何有用的实际代码，但我希望这个概念可以解决。