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

Question

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

我遇到的最大问题是在HTML/CSS/JavaScript中使用jQuery构建"翻转"动画.我发现的唯一教程是来自这个网络tuts +实际使用图像的文章.它将时钟的上半部分和下半部分分成两个不同的图像集,并替换它们经过的每一秒......

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

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

在此先感谢您的支持!

Answer 1

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

下一步将创造文本与图像翻转的错觉。我不确定你想怎么做。我认为这是一个规模和速度的问题。文本相对于图像的大小以及文本从顶部到底部翻转的速度。

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

我没有任何有帮助的实际代码，但我希望这个概念能够解决。