6

我正在努力根据那些带有向下翻转数字的旧时钟构建一个简单的动画。我在下面添加了一张从 Premium Pixels 上找到的免费赠品 PSD 复制的图像:

翻转时钟 PSD

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

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

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

提前感谢您的任何支持!

4

1 回答 1

0

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

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

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

我没有任何实际的代码可以提供帮助,但我希望这个概念能够奏效。

于 2012-04-11T18:05:57.420 回答