2012-04-11 46 views
6

我正在努力构建一个简单的动画基于那些旧时钟与下拉数字。我添加了一个图像下方的Premium像素发现了一个免费搭乘PSD复制:编码jQuery rolodex式时钟翻转动画?

flip-clock PSD

我运行到正在建设使用jQuery 一个“翻转”动画中的所有的HTML/CSS/JavaScript的最大的问题。我发现的唯一教程是from this net tuts+ article,它实际上使用图像。它将该时钟的顶部和底部半到两个不同的图像集并将其替换为经过每一秒......

这种方法是不是在一个网站现实,因为它提供了读者没有实际内容。我宁愿将数字硬编码为HTML,并仅通过jQuery执行翻动动画 - 最好不要使用除背景报价框之外的图像。或者换句话说,号码被编码为HTML,但时钟本身是一系列rolodex样式的bg图像。

我希望我已经说明了这不够好。我一直挣扎在这几天,我真的不知道如何处理这个脚本。也许通过将上半部分和下半部分分成不同的div,然后更改每秒传递的内部数字?我在jQuery中相当富裕,但我在动画方面很薄弱。

在此先感谢您的支持!

+3

也许这可能是一个开始.. http://dabblet.com/gist/2360985 – 2012-04-11 18:01:42

+0

@OscarBroman不错,但看起来它是一个实验性的功能,并且在大多数版本不支持。 – 2012-04-11 18:30:48

+0

大多数最新的浏览器都支持它,IE除外(如往常一样)。 – 2012-04-11 20:50:38

回答

0

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

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

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

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